Angular 9 MultiLingual Site with ngx-translate i18n Library

Every text on the application should be localized so that anyone can access the information provided on the app. In this tutorial, we will learn how to create an Angular app, which supports multiple languages. Various methods help in translating an Angular app, such as using the built-in i18n tool or by using the ngx-translate plugin.

We are going to internationalize our basic Angular 9 app using a third party plugin called ngx-translate.

Create Angular 9 Demo App

ng new angular-translate-app

Head over to the project.

cd angular-translate-app

install the Bootstrap package to create the form quickly

npm install bootstrap

Add the Bootstrap CSS path in styles array inside the angular.json file.

"styles": [
    "src/styles.css",
    "node_modules/bootstrap/dist/css/bootstrap.min.css"
]

Start the app in the browser.

ng serve --open

Adding ngx-translate in Angular 9 App

Run the following command to install the ngx-translate packages in Angular application.

npm i @ngx-translate/core --save
npm i @ngx-translate/http-loader --save

Next, import and register the TranslateModule in app.module.ts file.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient, HttpClientModule } from '@angular/common/http';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: httpTranslateLoader,
        deps: [HttpClient]
      }
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
// AOT compilation support
export function httpTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

Configure Translation Files

Open the assets folder and create “i18n” folder inside of it. In “i18n” folder, you have to add lang.json files along with the country code.
You can add as many languages as you want in i18n folder.
Add the English (en) values in key-value pair format in src/assets/en.json file.

{
    "Sitetitle": "Angular Multi Language Site",
    "Name": "Name",
    "NameError": "I am sure you must have a name!",
    "Email": "Email address",
    "PhoneNo": "Phone No",
    "Password": "Password",
    "Bio": "Enter bio",
    "TermsConditions": "I agree to terms and conditions.",
    "Submit": "Submit"
}

Add the Dutch (nl) values in key-value pair format in src/assets/nl.json file.

{
    "Sitetitle": "Hoekige site met meerdere talen",
    "Name": "Naam",
    "NameError": "Ik weet zeker dat je een naam moet hebben",
    "Email": "E-mailadres",
    "PhoneNo": "Telefoon nr",
    "Password": "Wachtwoord",
    "Bio": "Voer bio in",
    "TermsConditions": "Ik ga akkoord met de voorwaarden.",
    "Submit": "voorleggen"
}

Implementing Translations with TranslateService

In this step, we will learn how to implement translations, Import TranslateService in app.component.ts file.
import { TranslateService } from '@ngx-translate/core';
Next, inject TranslateService in the constructor. It allows us to access the translation service’s methods.

export class AppComponent {
  constructor(
    public translate: TranslateService
  ) {
    translate.addLangs(['en', 'nl']);
    translate.setDefaultLang('en');
  }
}

We will bind switchLang() to a select dropdown; this simple select dropdown will have the language list and translate the site content based on the user’s language preference.

switchLang(lang: string) {
  this.translate.use(lang);
}

Add the following code in the app.component.html template.

<span class="form-inline">
  <select
      class="form-control"
      #selectedLang
      (change)="switchLang(selectedLang.value)">
    <option *ngFor="let language of translate.getLangs()"
      [value]="language"
      [selected]="language === translate.currentLang">
      {{ language }}
    </option>
  </select>
</span>

Configure Translations with TranslatePipe

Add the following code inside the app.component.html file.

<nav class="navbar navbar-dark bg-primary">
  <div class="container">
    <a class="navbar-brand">
      {{'Sitetitle' | translate }}
    </a>
    <span class="form-inline">
      <select class="form-control" #selectedLang (change)="switchLang(selectedLang.value)">
        <option *ngFor="let language of translate.getLangs()" [value]="language"
          [selected]="language === translate.currentLang">
          {{ language }}
        </option>
      </select>
    </span>
  </div>
</nav>
<div class="container">
  <form>
    <div class="form-group">
      <label>{{'Name' | translate}}</label>
      <input type="text" class="form-control">
      <small class="text-danger">{{'NameError' | translate}}</small>
    </div>
    <div class="form-group">
      <label>{{'Email' | translate}}</label>
      <input type="email" class="form-control">
    </div>
    <div class="form-group">
      <label>{{'PhoneNo' | translate}}</label>
      <input type="tel" class="form-control">
    </div>
    <div class="form-group">
      <label>{{'Password' | translate}}</label>
      <input type="password" class="form-control">
    </div>
    <div class="form-group">
      <label>{{'Bio' | translate}}</label>
      <textarea rows="3" class="form-control"></textarea>
    </div>
    <div class="form-group form-check">
      <input type="checkbox" class="form-check-input">
      <label class="form-check-label">{{'TermsConditions' | translate}}</label>
    </div>
    <button type="submit" class="btn btn-block btn-danger">{{'Submit' | translate}}</button>
  </form>
</div>