Hello guys,
Today, I will tell you “How to implement Internationalisation in an ionic app” using the ‘ng2-translate’ and ‘Cordova Globalization plugin’.
Let’s get started, First, we have to install the necessary library and plugin that are shown below:-
|
1 2 |
npm install ng2-translate --save cordova plugin add cordova-lugin-globalization |
Creating Translation Files
The simplest way of providing the translation values for a language is assigning each string to a translation key and creating a JSON file containing all the keys of the strings that need to be translated and the related translated text. Since we set the path to our JSON files to “/src/assets/i18n/”, create an i18n folder under the “/src/assets/ “ path and create the ‘en.json’ file for the all the text in English and the ‘de.json’ file for the text in German.
Thus, all the highlighted keys in our template will be included in the ‘en.json’ file that will have the following structure:
|
1 2 3 4 5 6 7 8 9 10 |
{ "Name" : "Name", "Language" : "Language", "Email" : "Email", "Mobile" : "Mobile", "Sign Up" : "Sign Up" "Sign In" : "Sign In", "Confirm Password" : "Confirm Password", "Password" : "Password" } |
Similarly, the ‘de.json’ file will be:
|
1 2 3 4 5 6 7 8 9 10 |
{ "Name" : "Name", "Email" : "Email", "Mobile" : "Mobiltelefon", "Sign In" : "Anmelden", "Sign Up" : "Anheuern", "Language" : "Sprache", "Confirm Password" : "Bestätige das Passwort", "Password" : "Passwort" } |
Now, We must import ng2-translate in ‘app.module.ts’ file of the project.
Now, Load ‘TranslateLoader’, ‘TranslateModule’ and create custom ‘TranslateLoader’ that will be used by ‘TranslateModule’ which are shown below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
import {TranslateModule} from "ng2-translate/ng2-translate"; import {TranslateLoader, TranslateStaticLoader} from "ng2-translate/src/translate.service"; import {Http} from "@angular/http"; import {Globalization} from "@ionic-native/globalization"; import {LanguagePage} from "../pages/language/language"; export function createTranslateLoader(http: Http) { return new TranslateStaticLoader(http, 'assets/i18n', '.json'); } @NgModule({ declarations: [ LanguagePage ], imports: [ BrowserModule, TranslateModule.forRoot({ provide: TranslateLoader, useFactory: (createTranslateLoader), deps: [Http] }) ], bootstrap: [IonicApp], entryComponents: [ LanguagePage ], providers: [ HTTP, Globalization ] }) export class AppModule { } |
Now, Setting the user language on the platform ready in ‘app.component.ts’ file as shown below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import {TranslateService} from "ng2-translate"; import {Globalization} from "@ionic-native/globalization"; @Component({ templateUrl: 'app.html' }) export class MyApp { constructor(platform: Platform, statusBar: StatusBar, private splashScreen: SplashScreen,private translate: TranslateService, private globalization: Globalization) { platform.ready().then(() => { console.log('translate: ', this.translate) // add language translation file i.e. 'en.json' & 'de.json' this.translate.addLangs(["en", "de"]); // use a default language this.transalte.use('en'); }).catch((err) => { // console.log('err inside app.component ', err) }) } } |
Now, It is time to create the HTML template where we are going to display the translated text.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<ion-content> <ion-label class="signUpLabel">{{'Sign Up' | translate}}</ion-label> <form> <ion-item> <ion-label stacked>{{'Name' | translate}}</ion-label> <ion-input type="text"></ion-input> </ion-item> <ion-item> <ion-label stacked>{{'E-Mail' | translate}}</ion-label> <ion-input type="text"></ion-input> </ion-item> <ion-item> <ion-label stacked>{{'Mobile' | translate}}</ion-label> <ion-input type="number"></ion-input> </ion-item> <ion-label stacked>{{'Password' | translate}}</ion-label> <ion-input type="password"></ion-input> </ion-item> <ion-item> <ion-label stacked>{{'Confirm Password' | translate}}</ion-label> <ion-input type="text"></ion-input> </button> </ion-item> </form> </ion-card-content> <ion-row class="buttonRowStyle"> <button class="buttonStyle" ion-button outline round color="gradient-dark" (click)="registerUser()">{{'Sign Up' | translate}} </button> </ion-row> </ion-card> </ion-content> |
Now, Create ‘language.html’ and ‘language.ts’ file for changing the language in the whole application.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<ion-header> <ion-navbar> <ion-title>{{'Language' | translate}}</ion-title> </ion-navbar> </ion-header> <ion-content padding> <ion-list> <ion-item *ngFor="let selectLanguage of language" (click)="presentAlert(selectLanguage)"> {{selectLanguage}} </ion-item> </ion-list> </ion-content> |
Similarly, ‘language.ts’ file is shown below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
import { Component } from '@angular/core'; import {AlertController, Events, NavController, NavParams} from 'ionic-angular'; import {TranslateService} from "ng2-translate"; @Component({ selector: 'page-language', templateUrl: 'language.html', }) export class LanguagePage { language = ['English','Deutsch']; title = 'Change Language' message = 'Do you want to change the language?' constructor(public navCtrl: NavController, public navParams: NavParams, private alertCtrl: AlertController, private translate: TranslateService) { console.log("current language ",this.translate.currentLang()); } presentAlert(language){ let alert = this.alertCtrl.create({ title : this.title, message: this.message, buttons: [ { text: 'Cancel', role: cancel, handler: () => { console.log('Cancel clicked'); } }, { text: 'Ok', handler: ()=>{ this.changeLanguage(language); } } ] }) alert.present(); } changeLanguage(language){ if(language == 'English'){ this.translate.use('en') } else{ this.translate.use('de') } } |
I hope you have found this blog useful. If any extra information is required please comment below.
Happy Coding. 🙂
Recent Comments