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.

Use the provideTranslocoLoadingTpl function either in lazy module providers, component providers, in the template, or even in the AppModule/app.config.ts itself (affecting the entire app).

For example:

my-comp.component.ts
@Component({
  selector: 'my-comp',
  templateUrl: './my-comp.component.html',
  providers: [provideTranslocoLoadingTpl(`<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>