ionic i18n

Steps:

1. Create New Ionic Project
2. Install Required dependencies
3. Create .json files for different language
4. Declaring inside app.module.ts
5. Working with home.html & home.ts

1. Create New Project

ionic start i18n blank
cd i18n

2. Install Required Dependencies

angular library -> https://github.com/ngx-translate/core

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

! เลือก ngx-translate ให้ถูกต้องตาม version ของ angular

ตัวอย่างเช่น Angular5

npm install @ngx-translate/core@9.1.1 --save

3. Create .json file for languages

EN

assets/i18n/en.json

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

TH

assets/i18n/th.json

{ "APPLE": "แอปเปิล", "BALL": "บอล", "CAT": "แมว" }

4. 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 {}

5. working with home.html & home.ts

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>

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);
  }
}

Reference

https://codesundar.com/ionic-multi-language-support-i18n/