Translate Using Ionic 3 & Angular 5

Share the post

In this topic, We will see about translate functionality given by angular. It means if you want to translate some data in your language then use ngx-translate/core. By using this package we can able to translate data into multiple languages. Sometimes we have requirements from clients that they want to display mobile applications in their local language, not in English. So, at that time this functionality from angular is quite helpful for us. So, let’s begin with translating multi-language application ionic implementation in ionic 3 application.

Follow the steps to develop translate multi language application ionic

1.Install the dependency of ngx-traslate/core & ngx-translate/http-loader :

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

By using the above commands you can able to install the dependency.

NOTE : Please remember if you are using angular 5 for ionic 3 project then install

@ngx-translate/core version 9.0.2 & @ngx-translate/http-loader version 2.0.1.

To install the above-updated dependency please see the below commands :

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

If you are using another angular version then please see this table & install the related version. After installing the dependency if you want to check the installed version then please check the package.json file

as shown in the below picture.

package_json
package.json

2. Write dependency in app.module.ts file as shown below :

import { BrowserModule } from '@angular/platform-browser';

import { ErrorHandler, NgModule } from '@angular/core';

import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { SplashScreen } from '@ionic-native/splash-screen';

import { StatusBar } from '@ionic-native/status-bar';




import { MyApp } from './app.component';

import { HomePage } from '../pages/home/home';




import { HttpClient, HttpClientModule } from '@angular/common/http';

import { TranslateLoader, TranslateModule } from '@ngx-translate/core';

import { TranslateHttpLoader } from '@ngx-translate/http-loader';

export function createTranslateLoader(http: HttpClient) {

  return new TranslateHttpLoader(http, './assets/lang/', '.json');

}

@NgModule({

  declarations: [

    MyApp,

    HomePage

  ],

  imports: [

    BrowserModule,

    HttpClientModule,

    IonicModule.forRoot(MyApp),

    TranslateModule.forRoot({

      loader: {

        provide: TranslateLoader,

        useFactory: (createTranslateLoader),

        deps: [HttpClient]

      }




    }),

  ],

  bootstrap: [IonicApp],

  entryComponents: [

    MyApp,

    HomePage

  ],

  providers: [

    StatusBar,

    SplashScreen,

    HttpClient,

    { provide: ErrorHandler, useClass: IonicErrorHandler }

  ]

})

export class AppModule { }


3.Write default language english using translate service.The standard code for english is ‘en’.
Update app.component.ts as follows :

import { Component } from '@angular/core';

import { Platform } from 'ionic-angular';

import { StatusBar } from '@ionic-native/status-bar';

import { SplashScreen } from '@ionic-native/splash-screen';




import { HomePage } from '../pages/home/home';




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




@Component({

  templateUrl: 'app.html'

})

export class MyApp {

  rootPage: any = HomePage;




  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen,

    private translate: TranslateService) {

    platform.ready().then(() => {

      // Okay, so the platform is ready and our plugins are available.

      // Here you can do any higher level native things you might need.

      statusBar.styleDefault();

      splashScreen.hide();

    });

    this.initTranslate();




  }




  initTranslate() {

    this.translate.setDefaultLang('en');

    const browserLang = this.translate.getBrowserLang();

    if (!browserLang) {

      this.translate.use('en');

    }

  }

}

4.Create folder in src/assets/lang  :

Under the lang folder create two files 1 for en.json & another for hi.json

en.json represents English words object whereas hi.json contains object names in English but their respective values in Hindi.

en.json :

{
    "HELLOWORLD": "Hello World"
}

hi.json : 

{
 "HELLOWORLD": "नमस्ते दुनिया"
}

5. Now to access this above object name we can write HTML as follows :

<ion-header>

<ion-navbar>

<ion-title>

Ionic Blank

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-item>

<ion-label>English / Hindi</ion-label>

<ion-toggle [(ngModel)]="changeLang" (ionChange)="updateLang(changeLang)" checked="false"></ion-toggle>

</ion-item>

<ion-label>{{'HELLOWORLD' | translate}}</ion-label>

</ion-content>

In the above HTML we had to write {{‘HELLOWORLD’ | translate}} to detect object value for HELLOWORLD value from JSON file.

6. Now we can use the toggle button change listener to handle the change of values

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

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




@Component({

  selector: 'page-home',

  templateUrl: 'home.html'

})

export class HomePage {

  changeLang: boolean = false;

  constructor(public navCtrl: NavController, private translate: TranslateService) {




  }

  updateLang(lang) {

    console.log(lang);

    if (lang) {

      this.translate.use('hi');

    }

    else {

      this.translate.use('en');

    }

  }

}

In the above example, We had used the translate service to update changes in language. Just like the above example you can use the translate service in your own application & display the data in your local language.

The output of the above example is as shown below :

output_english_language
Output for english language

After toggling to the Hindi language the output is as follows :

output_hindi_language
Hindi language output

Leave a Comment