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.

Mouad EL Fakir

Software Craftsmanship, Stackextend author and Full Stack developer with 6+ years of experience in Java/Kotlin, Java EE, Angular and Hybris…
I’m Passionate about Microservice architectures, Hexagonal architecture, Event Driven architecture, Event Sourcing and Domain Driven design (DDD)…
Huge fan of Clean Code school, SOLID, GRASP principles, Design Patterns, TDD and BDD.