Support i18n in Angular 10 application using ngx-translate

Internationalization(i18n) is the process of making your application translatable in different locales. Here’s how you could add i18n support to your Angular application in five easy steps.

Step 1: Installation

Install ngx-translate/core module to leverage the benefits of ngx-translate in your application.

npm install @ngx-translate/core --save

Install ngx-translate/http-loader module to load the translation files in your application.

npm install @ngx-translate/http-loader --save

Step 2: Service to handle all translation logic in your app

Create a TranslationService to include translation logic for your application. Add languages to be supported directly as an array of locale or from Backend API response as per your requirement.

import { Injectable } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
@Injectable({  providedIn: 'root'})
export class TranslationService {
  constructor(private translateService: TranslateService) {}
  init(locale = 'en') {
    this.translateService.addLangs(['en', 'de']);
    this.translateService.use(locale);
  }
}

You can use the following event emitters as per the required functionality.

onLangChange.subscribe(
  (langChangeEvent: LangChangeEvent) =>…