How to integrate Internationalization (i18) in Angular

Internationalization is the process of designing and preparing your app to be usable in different languages. i18n pipes will help you achieve the internationalization in your app. Let’s start on how to integrate internationalization in Angular.

Prerequisites

Before continuing, check if you have following items installed on your machine:

• Node.Js. If not, install it from here.
• Angular. If not, install using command npm install -g @angular/cli

Step 1 – install @ngx-translate/core

Run below command to install the core library to translate our contents in different languages:

npm install @ngx-translate/core --save

Step 2 – import the TranslateModule

Finally, you can use ngx-translate in your Angular project. You have to import TranslateModule.forRoot()  in the root NgModule of your application.

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 { }

Step 3 – install a loader

By default, there is no loader available. You can add translations manually using setTranslation but it is better to use a loader. You can write your own loader, or import an existing one. We will use MultiTranslateHttpLoader in our project.

Run the command below to install loader:

npm install ngx-translate-multi-http-loader --save

Step 4 – import the MultiTranslateHttpLoader

Once you’ve decided which loader to use, you have to setup the MultiTranslateHttpLoader to use it.

Please note: We are going to create a folder within assets with name i18n. We will put our translation files there.

import { NgModule } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { TranslateModule, TranslateLoader } from "@ngx-translate/core";
import { MultiTranslateHttpLoader } from "ngx-translate-multi-http-loader";

export function HttpLoaderFactory(http: HttpClient) {
  return new MultiTranslateHttpLoader(http, [
    { prefix: "./assets/i18n/", suffix: ".json" }
  ]);
}

@NgModule({
  imports: [
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
    // other modules here ...
  ]
})
export class AppModule {}

Step 5 – Init the TranslateService

Initialize a default language at app component load.

import { Component, OnInit } from "@angular/core";
import { TranslateService } from "@ngx-translate/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  name = "";
  language: string = "en-US";
  constructor(private translate: TranslateService) {
    translate.setDefaultLang("en-US");
    translate.use("en-US");
  }

  ngOnInit() {
    this.translateText();
  }

  change() {
    const language = this.language || "en-US";
    this.translate.setDefaultLang(language);
    this.translate.use(language);
    this.translateText();
  }

  translateText() {
    this.translate
      .get("angular")
      .subscribe((text: string) => (this.name = text));
  }
}

Step 6 – bind translation in template

The last step is to bind the translations keys inside html template.

<label>{{'selectLanguage' | translate}}</label>
<br><br>
<select [(ngModel)]="language" (change)="change()">
  <option value="">Select</option>
  <option value="en-US">US English</option>
  <option value="fr-CA">French</option>
</select>
<hello name="{{ name }}"></hello>

I have incorporated the complete example in below Stackblitz editor.

Conclusions:

We learnt how to integrate internationalization i18 in Angular application.

Hope you are able to integrate it in your project. Write me up for any problem you face while integration.

Thank you!