Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • How to Implement Internationalization in Ionic 2/3 & Angular4 Application

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 707
    Comment on it

    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

        declarations: [
        imports: [
                loader: {
                    provide: TranslateLoader,
                    useFactory: HttpLoaderFactory,
                    deps: [HttpClient]
        bootstrap: [IonicApp],
        entryComponents: [
        providers: [
            {provide: ErrorHandler, useClass: IonicErrorHandler},
                provide: HTTP_INTERCEPTORS,
                useClass: TokenInterceptor,
                multi: true
        schemas: [


    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"]); 

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


    selectLanguage(language) {


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

    How to Implement Internationalization in Ionic 2/3 & Angular4 Application

 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: