Internationalization is a way of implementation of a service and a product so they can understand to specific local language. Usually this process is known as translation or localization. In Ionic 3/ 4 and Angular 4 application we can use ngx-translate plugin for Internationalization.

So, today's in this blog we will learn how to implement Internationalization in Ionic 2 | 3 And Angular4 application.

First of all, We need create an Ionic project. I believe you have already created a work environment for Ionic application. If not here is the link for Ionic installation guide : Ionic installation guide

After setup environment of Ionic application. We can use this plugin in the hybrid mobile applications. So, we can add platforms through following command :

ionic cordova platform add android

ionic cordova platform add ios

To install the plugin run following command through CLI:

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

To use ngx-translate we need to impot important modules in the app.module.ts

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

Now include HttpClientModule and TranslateModule in the NgModule imports

@NgModule({
    declarations: [
        MyApp
    ],
    imports: [
        HttpClientModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [HttpClient]
            }
        }),
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        MyApp
    ],
    providers: [
      
        {provide: ErrorHandler, useClass: IonicErrorHandler},
        {
            provide: HTTP_INTERCEPTORS,
            useClass: TokenInterceptor,
            multi: true
        }
        
    ],
    schemas: [
        CUSTOM_ELEMENTS_SCHEMA
    ],
})

In the example we will be using two languages ( English and French). For English and French translation we need to create two different JSON file. Lets say one is English.JSON and second one is French.JSON. To save these files we need to open src then assets and create a new folder with name i18n and the name of the folder is predefined. Now save English.JSON and French.JSON in the i18n folder. The path of the folder like:

src/ assets/ i18n/ English.JSON

src/ assets/ i18n/ French.JSON

Small example of how JSON file content looks like :

{
    "Welcome": {
        "Heading": "Welcome to Translation tutorial",
        "Title": "ngx-translate",
        "button": "OK",
        "dismiss": "Cancel"

    },
}

Lets import the TranslateService in the app.component.ts and also add service in the constructor.

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

constructor(private translate: TranslateService) {

    // Language array, Set default language English

    translate.addLangs(["English", "French"]); 
    translate.setDefaultLang("English");
    translate.use("English");

} 

In the above example we have set English as default language and using the English this time. We can add more languages to the array.

To show how translation works let me create a simple home.html file

<div class="row">
    <div class="col col-100">
        <label>{{'Welcome.Heading' | translate}}</label>

        <ion-list>
            <ion-item>
                <ion-label>{{'Welcome.Title' | translate}}</ion-label>
                <ion-select #langSelect (ionChange)="selectLanguage(langSelect.value)" okText="{{'Welcome.Button' | translate}}" cancelText="{{'Welcome.Dismiss' | translate}}">
                    <ion-option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">
                        {{ lang }}
                    </ion-option>
                </ion-select>
            </ion-item>
        </ion-list>
    </div>
</div>

selectLanguage(language) {
    this.translate.use(language);
}

This is how we can implement Internationalization. Hope this will help you :)