Skip to main content

Loading Template

Transloco provides you with a way to define a loading template, that will be used while the translation file is loading.

Similarly to the previous examples, set the TRANSLOCO_LOADING_TEMPLATE provider either in lazy module providers, component providers, in the template, or even in the AppModule itself (affecting the entire app).

For example:

my-comp.component.ts
@Component({  selector: 'my-comp',  templateUrl: './my-comp.component.html',  providers: [    {      provide: TRANSLOCO_LOADING_TEMPLATE,      useValue: '<p>loading...</p>'    }  ]})export class MyComponent {}

It can take a raw HTML value, or a custom Angular component. Alternatively, here is how to use it directly in the template:

my-comp.component.html
<ng-container *transloco="let t; loadingTpl: loading">  <h1>{{ t('title') }}</h1></ng-container>
<ng-template #loading>  <h1>Loading...</h1></ng-template>