TranslatePipe

The TranslatePipe is the easiest way for translation.

Usage

Here are some examples how we can use it:

<h5>Simple translation of words or phrases</h5>
<p>{{ 'HELLO_WORLD' | translate }}</p>

<h5>Translate a variable</h5>
<p>{{ status | translate }}</p>

<h5>Translate with variable</h5>
<p>{{ 'LAST_LOGIN' |translate: logindate }}</p>

<h5>Translate with defined parameters</h5>
<p>{{ 'GREET' | translate: { firstName: user.firstName, lastName: user.lastName } }}</p>

Module

You can use a specific module by adding a second parameter. If this parameter is not given the provided Translator will be used. You can overwrite the provided translator in the component (described in section Modules).

<p>{{ 'TITLE' | translate:{}:'admin' }}</p>

Better translate before

For the most use cases we suggest you to translate before in the component. Here are the examples again:

import { Component } from '@angular/core';

import { Translator } from 'angular-translator';

@Component({
    selector: 'my-component',
    template: '
<p>{{ translatedStatus }}</p>

<p>{{ lastLogin }}</p>

<p>{{ greeting }}</p>'
})
export class MyComponent {
    constructor(private translator: Translator) {
        this.status = 'PENDING';
        
        this.logindate = new Date('2016-02-11');
        
        this.user = {
              firstName: 'John',
              lastName: 'Doe'
        }
        
        this.getTranslations();
        
        translator.languageChanged.subscribe(() => this.getTranslations());
    }
  
    private getTranslations() {
        TranslateService.waitForTranslation().then(() => {
            this.translatedStatus = TranslateService.instant(status);
            
            this.lastLogin = TranslateService.instant('LAST LOGIN', logindate);
            
            this.greeting = TranslateService.instant('GREET', this.user);
        });
    }
}