Internationalization (i18n) of Angular apps using ngx-translate

1. Overview

Almost every web application need to support internationalization (i18n), and Angular apps make no exception.

In this article, I will show you how to translate Angular apps using ngx-translate.

ngx-translate is one of the best internationalization library for Angular.

2. Implementation

Create new Angular app using ng new command.

ng new i18n-angular-demo

Install @ngx-translate/core and @ngx-translate/http-loader packages using npm install command.

npm install @ngx-translate/[email protected] --save
npm install @ngx-translate/http-loader --save

Note that the version >=10 of @ngx-translate/core  is not compatible with Angular 5.

Add the following configuration to your app.module.ts.

import {HttpClient, HttpClientModule} from '@angular/common/http';
import {TranslateLoader, TranslateModule, TranslateService} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

@NgModule({
  ...
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),
  ],
  ...
})

Add an initial configuration of the i18n inside the constructor of the AppModule.

export class AppModule {
  ...
  constructor(translate: TranslateService) {
    // set fallback languages (if no language is selected)
    translate.setDefaultLang('en');

    // set current language
    translate.use('fr');
  }
}

Inside the app.component.html use the translate:params pipe to defined a i18n entry message.

<div>
	<!--  will be populated later with the translated value -->
	<h2>{{ 'app.greeting' | translate : { firstname: 'Foo'} }}</h2>
  
	<p>{{ 'app.message' | translate }}</p>
</div>

Inside the assets/i18n folder create json files for every language you need : [language].json.

.../assets/i18n/fr.json
{
  "app": {
    "greeting": "Bonjour {{ firstname }}!",
    "message": "Ceci est une démo i18n avec ngx-translate !"
  }
}

.../assets/i18n/en.json
{
  "app": {
    "greeting": "Hello {{ firstname }}!",
    "message": "This is a i18n demo using ngx-translate !"
  }
}

Find a complete example on GitHub.