Translating
You can implement translation in your Angular application in the following ways.
- Using the translate pipe
- Using the
t
attribute - Using the Translations methods
Translate pipe
You can translate a string using the translate pipe
. It accepts specific parameters and an optional default value.
<h1>{{'hello_world' | translate}}</h1>
To provide parameters for translation, pass them as the first parameter of the translate
pipe.
To enable parameter interpolation, you need to use a message formatter.
<h1>{{'hello' | translate:{ name: 'John Doe' }}}</h1>
You can also provide a default value.
// with params
<h1>{{'hello' | translate:{ name: 'John Doe' }:'Default!'}}</h1>
// or without params
<h1>{{'hello' | translate:'Default!'}}</h1>
To disable wrapping, provide a noWrap
option.
<h1>{{ 'hello' | translate:{ noWrap: true } }}</h1>
t
attribute
You can also use a t
attribute with an element for translation. Angular will render Tolgee component with t
attribute selector.
<h1 t key="providing_default_values"></h1>
To provide parameters for translation, pass them via the params attribute.
To enable parameter interpolation, you need to use a message formatter.
<p t key="using_t_with_params" [params]="{ name: 'John Doe' }"></p>
You can also provide a default value using the default
attribute.
<p t key="using_t_with_default" default="This is default"></p>
Translation methods
To translate texts in your component code, you can use translate
or instant
methods.
These methods are part of TranslateService
which can be injected using dependency injection as shown in the following example.
import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@tolgee/ngx';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
constructor(private translateService: TranslateService) {}
helloWorld: string;
async ngOnInit(): Promise<void> {
this.translateService
.translate('hello_world')
.subscribe((r) => (this.helloWorld = r));
}
}
translate
method returns an Observable. As a result, the provided listener is called every time the translation changes due to language changes or other reasons.
this.translateService
.get('hello_world')
.subscribe((r) => (this.helloWorld = r));
If you are unable to use this asynchronous approach for any reason, you can use the
instant
method.
Don't overuse the instant
method. Whenever possible, use the translate
method.
When translations are not loaded, instant
method will not provide a valid result.
this.helloWorld = this.translateService.instant('hello_world');
Both the instant
and translate
methods accept the same parameters as tolgee.t
.
You can also check the Angular example application to learn more.