Skip to main content

Multiple Languages Simultaneously

There are times you may need to use a different language in a specific part of the template, or in a particular component or module. This can be achieved in by using the provideTranslocoLang function.

Here's an example of setting it in a component's providers:

my-comp.component.ts
@Component({
  selector: 'my-comp',
  templateUrl: './my-comp.component.html',
  providers: [provideTranslocoLang('es')],
})
export class MyComponent {}

Using Angular's DI rules, this will ensure that the language in this component's template and all of its children's templates is es.

Alternatively, here is how to use it directly in the template:

my-comp.component.html
<ng-container *transloco="let t; lang: 'en'">
  <p>Inline (en) wins: {{ t('home') }}</p>
</ng-container>

Note that it will be used as the initial language. If you need it to be static, you can use the static pipe:

my-comp.component.ts
@Component({
  selector: 'my-comp',
  templateUrl: './my-comp.component.html',
  providers: [provideTranslocoLang('es|static')],
})
export class MyComponent {}

Or in the template:

my-comp.component.html
// Define the lang dynamically in the component
<ng-container *transloco="let t; lang: someVariable">
  // Or pass it as inline string
  <ng-container *transloco="let t; lang: 'es|static'">
    <p>Inline (es) wins and stays: {{ t('home') }}</p>
  </ng-container></ng-container
>