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 a similar way to the previous example, except here set the TRANSLOCO_LANG provider either in lazy module providers list, the component providers or in the template.

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: [
    {
      provide: TRANSLOCO_LANG,
      useValue: '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: [
    {
      provide: TRANSLOCO_LANG,
      useValue: '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>