28/02/2019 HOW TO BUILD IONIC 3 MULTI-LANGUAGE APP – Saloni Malhotra – Medium

HOW TO BUILD IONIC 3 MULTI-

LANGUAGE APP
Saloni Malhotra Follow
Nov 13, 2017 · 2 min read

This is going to be very interesting , we are going to do it one by one

Step -1 Start new ionic app:

ionic start multilingual

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

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

save

Step-3 Firstly import into your Service:

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

Step -4 Secondly add into array import Section

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

Step-5 Setting up folder location for ionic 3

This step is very important .Make folder under asssets section
src/assets/i18n/ folder.

In app.module.ts import the following modules:-

https://medium.com/@salonimalhotra1ind/how-to-build-ionic-3-multi-language-app-b5a34d105b9 1/5
28/02/2019 HOW TO BUILD IONIC 3 MULTI-LANGUAGE APP – Saloni Malhotra – Medium

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 con g Object for .root import following Modules

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 le. So rst 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 les for each language

In Src/assets/i18n folder under create json les .In Which language uh

want to import so You have to add les per language. I have create 2

https://medium.com/@salonimalhotra1ind/how-to-build-ionic-3-multi-language-app-b5a34d105b9 2/5
28/02/2019 HOW TO BUILD IONIC 3 MULTI-LANGUAGE APP – Saloni Malhotra – Medium

les for English and German (en.json and de.json)

Here is how my both les looks like :

<strong>en.json</strong>

{
"home":"Home",
"about": "About",
"contact": "Contact",
"welcome":"Welcome to ionic",
}

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

<strong>de.json</strong>

{
"home": "huis",
"about": "over",
"contact": "Contact",
"welcome": "Welkom bij ionic!",
}

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

ex. In home.html page under pages folder

<h2>{{"home" | translate }}</h2>

<p>
{{ "about" | translate }}
</p>
<p>
{{"welcome" | translate }}
</p>

Hi, My name is Saloni Malhotra. I am a Javascript Developer and writer. I

am here to talk so Don’t hesitate to Drop me a message.if you like my story
Please Click ❤ and share with everyone.

https://medium.com/@salonimalhotra1ind/how-to-build-ionic-3-multi-language-app-b5a34d105b9 3/5
28/02/2019 HOW TO BUILD IONIC 3 MULTI-LANGUAGE APP – Saloni Malhotra – Medium

Thanks !!
Happy coding

https://medium.com/@salonimalhotra1ind/how-to-build-ionic-3-multi-language-app-b5a34d105b9 4/5
28/02/2019 HOW TO BUILD IONIC 3 MULTI-LANGUAGE APP – Saloni Malhotra – Medium

https://medium.com/@salonimalhotra1ind/how-to-build-ionic-3-multi-language-app-b5a34d105b9 5/5