HOW TO BUILD IONIC 3 MULTI-LANGUAGE APP
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:-
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 config 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 file. So first import the TranslateServiceand 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
In Src/assets/i18n folder under create json files .In Which language uh want to import so You have to add files per language. I have create 2 files for English and German (en.json and de.json)
Here is how my both files looks like :
<strong>en.json</strong>
{
"home":"Home",
"about": "About",
"contact": "Contact",
"welcome":"Welcome to ionic",
}
These files 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.
Thanks !!
Happy coding
.png)
