Multiple Languages Simultaneously
There are scenarios where you may need to use a different language within a specific part of your application, such as a component, module, or a template section. This can be achieved using the provideTranslocoLang
function.
Setting Language in a Component's Providers
You can set a specific language for a component and its children by adding provideTranslocoLang
to the providers
array of the component:
my-comp.component.ts
@Component({
selector: 'my-comp',
templateUrl: './my-comp.component.html',
providers: [provideTranslocoLang('es')],
})
export class MyComponent {}
Using Angular's Dependency Injection (DI) rules, ensures that the es
language is applied in this component's template and all of its child components.
Specifying Language Directly in a Template
You can also set the language inline within a template using the *transloco
structural directive:
my-comp.component.html
<ng-container *transloco="let t; lang: 'en'">
<p>Inline (en) wins: {{ t('home') }}</p>
</ng-container>
In this example, the language for this part of the template is explicitly set to en
.
Using a Static Language
If you need the language to remain static (i.e., not change dynamically), you can append |static
to the language definition.
Setting in a Component:
my-comp.component.ts
@Component({
selector: 'my-comp',
templateUrl: './my-comp.component.html',
providers: [provideTranslocoLang('es|static')],
})
export class MyComponent {}
Setting Directly in a Template:
You can dynamically define the language or pass it as a static value:
my-comp.component.html
<!-- Define the language dynamically from the component -->
<ng-container *transloco="let t; lang: someVariable">
<p>Dynamically set language: {{ t('home') }}</p>
</ng-container>
<!-- Or pass it as a static inline string -->
<ng-container *transloco="let t; lang: 'es|static'">
<p>Inline (es) wins and stays: {{ t('home') }}</p>
</ng-container>
This approach provides flexibility to localize specific parts of your application based on the context while maintaining the desired level of language control.
Last updated
Was this helpful?