Internationalization (i18n) of Angular apps using ngx-translate

Angular featured image

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.

i18n Angular app demo

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/core@9.1.1 --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.

Angular i18n json files

.../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.

 

4
Leave a Reply

avatar
2 Comment threads
2 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
Mouad EL FakirCHARAFI Saad Recent comment authors

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
newest oldest most voted
Notify of
CHARAFI Saad
Guest
CHARAFI Saad

Hello Mouad,
Can u explain how to export csv file in angular 5 ?

CHARAFI Saad
Guest
CHARAFI Saad

Hello Mouad,

thank you for sharing your experience feedback. But I would like to know the difference between i18n and ngx-translate.
i18n generate an application with the default language whose application has been developed.
But ngx-translate just makes the switch between languages.

Thank u