<!-- use default language from service -->
<h2 translate="hello_user" [values]="{ user: 'Oleg' }"></h2>
<!-- use other language -->
<h2 translate="hello_user" to="ru-RU" [values]="{ user: 'Oleg' }"></h2>
<!-- use fallback -->
<!-- please not that Angular does not like when we use "{" in templates so tou need to replace it with
amp;#123; (optionally closing bracket with amp;#125;) or escape it somehow :) -->
<h2 translate="hello_user_not_there" [values]="{ user: 'Oleg' }">Hello amp;#123;user}</h2>
<!-- use simpler fallback -->
<h2 translate="hello_user_not_there" [values]="{ user: 'Oleg' }">Hello user</h2>
In this case as a fallback we use element text.
Use Pipe
<!-- use default language from service -->
<h2>{{ 'hello_user' | translate: { user: 'Oleg' } }}</h2>
<!-- use other language -->
<h2>{{ 'hello_user' | translateTo: 'ru-RU': { user: 'Oleg' } }}</h2>
<!-- use fallback -->
<h2>{{ 'hello_user_not_there' | translate: { user: 'Oleg' } : 'Hello ${user}'}}</h2>
Use Service
@Component({
...
})
export class Component {
hello: string;
constructor(private translate: TranslateService) {
// use default language from service
this.hello = translate.translate('hello_user', { user: 'Oleg' })
// use other language
this.hello = translate.translateTo('ru-RU','hello_user', { user: 'Oleg' })
// use fallback
this.hello = translate.translateTo('ru-RU','hello_user_not_there', { user: 'Oleg' }, 'Hello ${user}')
}
}
Load dictionaries
Root
Default forRoot initialization allows to use injected dependencies (e.g. HttpClient) to fetch dictionaries. It returns Observable that contains set of dictionaries
You may subscribe on languageChange$ and dictionaryChange$ if needed.
For more complex scenarios you may use initialization functions and APP_INITIALIZER token.
Lazy
Load dictionaries for Lazy modules a bit trickier.
You have to extend dictionaries (same keys with be replaced with latest added).
First load dynamic dictionaries in the same (almost) as for root.