How to build Ionic 3 multi-language app using angular 2 i18n

By using Multi-language, you can increase the volume of users supported for an app. Do you want to crate multilingual ionic app? Creating Ionic 3 multi-language app is very easy. In this tutorial I am going to show you how you can create multi-language app using ionic 3. We are going to use angular translate to have multiple language support in your app.

How to build Ionic 3 multi language app using angular 2 i18n

 

This is going to be very interesting , we are going to do it one by one. By the end of this post, you it will looks like something this:

Ionic 3 multi-language app

 

Step 1: Start new ionic app:

The very first thing you need to do is start new ionic app, you will use following command to create new ionic 3 app:

ionic start multilingual 

It may ask you to select starter for your app. As ionic offer you some pre built starter apps which you can use:

 

angular2 translate

 

You can chose any starter which you want to have or you can also chose blank to create everything own. I am going to use tabs for this app. You can also run following command if you already know which starter you are going to use:

ionic start multilingual tabs 

Once you run this command it may take some time to install required modules 🙂

 

Step 2: Installing angular translate and setup in ionic app:

Once your ionic app is created its time to setup angular translate . You need to run following command :

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

Note: But you should be in your project’s folder (must run cd multilingual ).

 

After installing angular translate we age going to do some changes in app.module.ts file.

First, import the service into the file:

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

Second, add it into imports array section:


imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
TranslateModule.forRoot()
],

 

Step 3: Setting up folder location for ionic 3

This step is very important because by default it will look for languages file inside i18n/ folder but as of ionic 2/ionic 3 we have to load language files from src/assets/i18n/ folder.

You can easily do this by creating  function which will return TranslateLoader . First of all  add these imports into top of app.modules.ts file:

import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

export function setTranslateLoader(http: Http) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

And then add a ‘config‘ object to the .forRoot()function:


imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (setTranslateLoader),
deps: [HttpClient]
}
})
],

Okay we are almost done with angular translate now it’s time to set default language into app.component.ts file. So first import the  TranslateService and inject it into constructor:


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

export class MyApp {
rootPage:any = TabsPage;

constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, translate: TranslateService) {
translate.setDefaultLang('en');
platform.ready().then(() => {
statusBar.styleDefault();
splashScreen.hide();
});
}
}

 

Step 4: Add the language files for each language

Its time to create the language files for each language (.json files). You have to add files per language. I have create 2 files for English and German (en.json and de.json). So go ahead and create these two files inside src/assets/i18n folder.

Here is how my both files looks like :

<strong>en.json</strong>
{
"home":"Home",
"about": "About",
"contact": "Contact",
"welcome":"Welcome to ionic",
"text":"This starter project comes with simple tabs-based layout for apps that are going to primarily use a Tabbed UI.",
"secondText":"Take a look at the src/pages/ directory to add or change tabs,update any existing page or create new pages."
}

<strong>de.json</strong>
{
"home": "huis",
"about": "over",
"contact": "Contact",
"welcome": "Welkom bij ionic!",
"text": "Dit startproject wordt geleverd met een eenvoudige tabbladen-opmaak voor apps die voornamelijk een Tabbed-gebruikersinterface gebruiken.",
"secondText": "Bekijk de src/pages/ map om tabbladen toe te voegen of te wijzigen, een bestaande pagina te updaten of nieuwe pagina's te maken."
}

 

These files contains JSON  Object so that we can easily access them by using  keys of object.

 

Step 5: Using translation pipes to translate text in html pages

Yes, we are almost there its time to translate our text using angular pipes. Go to pages/home/home.html and change the html, so our html will be changed something like this:

<h2>{{"welcome" | translate }}</h2>
 <p>
 {{ "text" | translate }}
 </p>
 <p>
 {{"secondText" | translate }}
 </p>

Its looking awesome 🙂

HOW TO BUILD IONIC 3 MULTI LANGUAGE APP USING ANGULAR 2 I18N

 

Step 6 : Change language based on user selection:

This is last and very important step. In this step we will change default language based on user’s selection. I am going to add two buttons one for English and one for German. So when you click on that language will be changed to specific language:


<button ion-button block (click)="changeLanguage('en')">
 Translate to English
 </button>
 
 <button ion-button block (click)="changeLanguage('de')">
 Translate to German
 </button>

 

Now we will create changeLanguage() function into pages/home/home.ts file, fist import TranslateService  and inject it to constructor:


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

constructor(public navCtrl: NavController, public translateService: TranslateService) {

}

And then create  changeLanguage() function:


changeLanguage(langauge) {
this.translateService.use(langauge);
}

That’s all

Download Source code

 

 

 

One Comment

  1. Hamid December 3, 2017 Reply

Add a Comment

Your email address will not be published. Required fields are marked *