Internationalization with ngx-translate

Internationalization is the process of adapting software to different languages and regions. It is done by using the @ngx-translate/core package.

To install it, run the following command in your terminal:

npm install @ngx-translate/core

This will add internationalization support to the app.

Setup

To set up TranslateModule and TranslateService, you need to import TranslateModule into your app module.

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {TranslateModule} from '@ngx-translate/core';

@NgModule({
    imports: [
        BrowserModule,
        TranslateModule.forRoot()
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

To define translations, you need to create a JSON file with the translations. For example, the following code defines the translations for the English language:

{
    "HELLO": "Hello",
    "WORLD": "World"
}

{
    "HELLO": "Buna",
    "WORLD": "Lume"
}

Translating stuff

From the template

To translate stuff from the template, you need to use the translate pipe. For example, the following code translates the string "Hello World" to the English language:

{{ 'HELLO' | translate }} {{ 'WORLD' | translate }}

From component

To translate stuff from the component, you need to inject the TranslateService and use the get() method. For example, the following code translates the string "Hello World" to the English language:

import {Component} from '@angular/core';
import {TranslateService} from '@ngx-translate/core';

@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss']
})
export class HomeComponent {
    constructor(private translateService: TranslateService) {
    }

    translate() {
        this.translateService.get('HELLO').subscribe((res: string) => {
            console.log(res);
        });
    }
}

Changing the language

To change the language, you need to use the use() method of the TranslateService. For example, the following code changes the language to Romanian:

import {Component} from '@angular/core';
import {TranslateService} from '@ngx-translate/core';

@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss']
})
export class HomeComponent {
    constructor(private translateService: TranslateService) {
    }

    changeLanguage() {
        // set default language
        this.translateService.setDefaultLang('ro');
        // change language
        this.translateService.use('ro');
    }
}

Objects in translations

You can specify objects in translations. For example, the following code defines the translations for the English language:

{
    "HELLO": "Hello",
    "WORLD": "World",
    "HELLO_WITH_VALUE": "Hello, {{value}}"
}

{
    "HELLO": "Buna",
    "WORLD": "Lume",
    "HELLO_WITH_VALUE": "Buna, {{}}"
}

With the service, you can pass the value to the translation. For example, the following code translates the string "Hello Rusu" to the English language:

import {Component} from '@angular/core';
import {TranslateService} from '@ngx-translate/core';

@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss']
})
export class HomeComponent {
    constructor(private translateService: TranslateService) {
    }

    translate() {
        this.translateService.get('HELLO_WITH_VALUE', {value: 'Rusu'}).subscribe((res: string) => {
            console.log(res);
        });
    }
}

You can do the same with a pipe, but you need to pass the value to the pipe. For example, the following code translates the string "Hello Rusu" to the English language:

{{ 'HELLO_WITH_VALUE' | translate: {value: 'Rusu'} }}

Another way you can achieve this is by defining the value in the component. For example, the following code translates the string "Hello Rusu" to the English language:

import {Component} from '@angular/core';
import {TranslateService} from '@ngx-translate/core';

@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss']
})
export class HomeComponent {
    param = {value: 'Rusu'};
}

{{ 'HELLO_WITH_VALUE' | translate:param }}