Angular 2/4 Content Translation using ngx-translate

NGX-Translate

NGX-Translate is the i18n library for Angular 2 or 4 and used for template translation in various languages and switching between the languages.
It provides a service, a directive and a pipe to handle any dynamic/static template.
NGX-Translate is based on modular approach and customizable.

Implementation with ngx-translate

The main module of the library is named core. A good practice to add a loader to load translations into application.
NGX-Translate Implementaion is available in the following modules:

• core: The internationalization (i18n) library for Angular 2/4.
• http-loader: A loader for ngx-translate that loads translations with http calls.
• ngx-translate-website: NGX-Translate, the internationalization (i18n) library for Angular 2/4

NGX-Translate Loaders

• Http Loader: Loads JSON translation files with http.
• Angular Universal Loader: Loads JSON translation files with fs instead of http.
• Po Loader: Loads .po files with http.

NGX-Translate Implementation: Core

1.  Import the TranslateModule 
2. Init the TranslationService for application 
3. Define the translations 
4. Use the service, the pipe or the directive 
5. Use the HTML tags

Step by step guide to apply localization on Angular-CLI

• Step-1. Create i18n folder in project root and add lang JSON eg. en.json fr.json or ge.json.
• Step-2. Open app.module.ts file and add the following lines of code: imports:
  

         
  
  import {TranslateModule, TranslateLoader} from "@ngx-translate/core";
  import {TranslateHttpLoader} from "@ngx-translate/http-loader";
  import {Http} from "@angular/http";
  
         
   

  Before the @NgModule add the following lines of code which is for AoT requires an exported function for factories used
  

         
  
  export function HttpLoaderFactory(http: Http) {
      return new TranslateHttpLoader(http, "i18n/", ".json");
  }
  
         
   

  Add into the import part of @NgModule
  

         
  
              TranslateModule.forRoot({
              loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [Http]
              }
            })
  
         
   

• Step-3. Resolve dependencies, if you run the application you can see the following error:

         
  
  app/app.module.ts(17,48): error TS2307: Cannot find module '@ngx-translate/core'.
  app/app.module.ts(18,35): error TS2307: Cannot find module '@ngx-translate/http-loader'.
         
   

  To resolve these dependencies navigate to the project root directory and run the following command:

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

• Step-4. Open your component.ts and import translate core:

         
              import {TranslateService} from '@ngx-translate/core';
         
   

• Step-5. Open your component.ts and add/modify the constructor with:

         
  constructor(private translate: TranslateService) {
     translate.addLangs(["en", "ge"]);
        translate.setDefaultLang('en');
  
        let browserLang = translate.getBrowserLang();
        translate.use(browserLang.match(/en|ge/) ? browserLang : 'en');
    }
         
   

• Step-6. Open component.html file and add the drop down logic to change the lang:

         
  
  <div style="padding-top:15px;padding-right:5px;">
           <label><span style="color:white">{{ 'header.select' | translate }}</span>
             <select #langSelect (change)="translate.use(langSelect.value)">
                <option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">{{ lang }}
   </option>
   </select>
   </label>
  </div>
  
         
   

We have developed and implemented and example using these services which is available https://github.com/vinodkumartiwari/angular2-ngx-translate-demo-angular-cli and you can download/clone the code using the following url:

https://github.com/vinodkumartiwari/angular2-ngx-translate-demo-angular-cli.git