IONIC2 | Internationalization (i18n) Of Ionic2 Apps

Polish your ionic2 app by incorporating Internationalization and Localization

Updated for Ionic 2.0.0-beta.11

Please use the revised guide located here !

This post will explain how to use internationalization (i18n) and localization (l10n) to externalize the strings in your ionic2 app. Click here to learn more about i18n or l10n.. I will be using ng2-translate for this post.

This post uses the beta version of Ionic2, so make sure to update to beta version of Ionic2 as follows:

npm install -g ionic@beta // install beta version of ionic2
npm update -g ionic@beta  // update existing installation of ionic to ionic2 beta

Step 1: Install ng2-translate module via the npm command.

npm install ng2-translate --save

Step 2: In app.js, import the TranslateService and TranslationPipe.


import 'reflect-metadata';
import 'zone.js'
import {Http, Headers} from 'angular2/http';
import {provide} from 'angular2/core';
import {TranslateService, TranslatePipe, TranslateLoader, TranslateStaticLoader} from 'ng2-translate/ng2-translate';

Step 3: In app.js, add the providers and pipes for TranslationService.

@App({
   templateUrl: 'build/app.html',
   config: {},
   providers: [
    provide(TranslateLoader, {
      useFactory: (http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
      deps: [Http]
    }),
    TranslateService
   ],
   pipes: [TranslatePipe]
})

Step 4: In app.js, add the initialization function for TranslationService.

initTranslation() {
    //check the language provided by the navigator 
    //(for example: en-US, we are only interested in the en part)
    var userLang = navigator.language.split('-')[0]; // use navigator lang if available
    
    // use en, if the language is other than that supported by our app (es, en zh or fr)
    userLang = /(fr|en|es|zh)/gi.test(userLang) ? userLang : 'en';

    // optional, default is "en"
    this.translate.setDefaultLang('en');

    // the lang to use, if the lang isn't available, it will use the current loader to get them
    this.translate.use(userLang);
  }

Step 5: In app.js, update the parameters and constructor to make the TranslationService available and initialize it.

static get parameters() {
    return [[IonicApp], [Platform], [TranslateService]];
  }

  constructor(app, platform, translate) {
    
    this.app = app;
    this.platform = platform;
    this.translate = translate;
    this.initTranslation();

    this.initializeApp();

    this.rootPage = GettingStartedPage;

  }

Step 6: The preferred way is to keep the strings external to the code. Create the en.json file that will hold your translations strings for en locale, in www/assets/i18n folder. You can add additional json for all the languages supported in the www/assets/i18n folder.

{
  "HOME": "Home",
  "SETTINGS" : "Settings",
  "BACK" : "Back"
}

Step 7: You can now use the externalized strings in your template as :

<ion-title><ion-icon name="settings" item-left></ion-icon>{{"SETTINGS" | translate}}</ion-title>

<button ion-item menuClose>
  <ion-icon item-left name="link" secondary></ion-icon>{{"HOME" | translate}}
</button>

Step 8: To get translated strings in your app.js, you can use as follows:

this.translate.get("HOME", null).subscribe(localizedValue => console.log(localizedValue));