ionic-multi-language-support
ionic-multi-language-support
ionic-multi-language-support

ionic multi language support example using ng-translate (https://github.com/ngx-translate) allows you to create ionic projects with multiple language support.

Steps:

  1. Create New Ionic Project
  2. Install Required dependencies
  3. Create .json files for different language (here I’m going to use English & Tamil)
  4. Declaring inside app.module.ts
  5. Working with home.html & home.ts

Create New Project

Here, I’m going to create new project called i18. After creation we can serve our project to browser

ionic start i18n blank
cd i18n
ionic serve

Install Required Dependencies

For translation purpose, we are going to use a angular library called ng-translate (https://github.com/ngx-translate/core). To install ng-translate we need to execute

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

 

Create .json file for languages

assets/i18n/en.json

{"APPLE": "Apple", "BALL": "Ball", "CAT": "Cat" }

assets/i18n/ta.json

{ "APPLE": "ஆப்பிள்", "BALL": "பந்து", "CAT": "பூனை"}
Declaring inside app.module.ts
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
@NgModule({
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: createTranslateLoader,
        deps: [HttpClient]
      }
    })
  ]
})
export class AppModule {}

In above code, we have imported and declared TranslateModule, TranslateLoader, TranslateHttpLoader modules for translation purpose, where these plugin requires http module for requesting .json file, so we also imported and declared HttpClientModule, HttpClient

working with home.html

<ion-list>
<ion-item>
<ion-label>Language</ion-label>
<ion-select [(ngModel)]="lang" (ionChange)="switchLanguage()">
<ion-option value="en">English</ion-option>
<ion-option value="ta">Tamizh (தமிழ்)</ion-option>
</ion-select>
</ion-item>
</ion-list>
<ion-list>
 <ion-item>
  <h2>{{ 'APPLE' | translate }}</h2>
 </ion-item>
 <ion-item>
  <h2>{{ 'BALL' | translate }}</h2>
 </ion-item>
 <ion-item>
  <h2>{{ 'CAT' | translate }}</h2>
 </ion-item>
</ion-list>

We created ionic select box to choose languages and we created a list of data to display with translate parameter.

working with home.ts

import { TranslateService } from '@ngx-translate/core';
export class HomePage {
  lang:any;
  constructor(public translate: TranslateService) {
    this.lang = 'en';
    this.translate.setDefaultLang('en');
    this.translate.use('en');
  }
  switchLanguage() {
    this.translate.use(this.lang);
  }
}

In above code we have created translate variable using TranslateService for choosing languages

Output

Sundaravel M

About the author: Hey! It's me sundar. (Yea, I'm the founder of codesundar.com). I'm a passionate computer programmer who loves modern web and mobile development. feel free to reach me : Facebook - Twitter - Google+