Multi-Language Functionality In Ionic_v2

Multilingual with Ionic

The Multi-language functionality gives you a facility to have your ionic application in more than one languages.

In this part of the blog, we will be going to explain how you can include translations facility to your application.

We use for translation language ngx-translate npm plugin.

Ngx-translate:

It is an npm plugin that is used for translate the language and switching languages. 

First of all, we need to install the above mentioned plugin in the application using the below mentioned command.

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

After installing ngx-translate you need to import array in the NgModule of the application.
Below is an example of the app.module.ts file:

import { NgModule } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';

@NgModule({
  imports: [
    TranslateModule.forRoot()
  ],
Providers:[]
})
export class AppModule{}

Now after injecting the plugin in the module we must know how to use that in application. First of all we need to create multiple json files for each language that you are planning to have in your application. Let’s say for example, you are planning to have two languages English and French in your application then please create two files at the below mentioned path.

/assets/i18n/en.json and /assets/i18n/fr.json
If the i18n folder is not there then please create it at above mentioned path and then place the json files under it.

Now let’s have a look at how those files will look like from inside.

en.json file:
{
    HELLO:"Hello World"
}
Or 
fr.json file:
{
    HELLO:"Bonjour"
}

Now as we are done with basic setup of multilingual functionality in our application, Let’s implement it in our component. First include the injections in app.module.ts file

app.module.ts

import { NgModule } from '@angular/core';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpModule, Http } from '@angular/http';

export function createTranslateLoader(http: Http) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
@NgModule({
  imports: [
    HttpModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [Http]
      }
    })
  ]
})
export class AppModule{}

After implementing above mentioned code we need to use TranslatePipe and TranslateService to translate the language of view file. The TranslatePipe is an angular js pipe.

Below Example suggest how TranslatePipe to translate the language of application:

<h1> {{ 'HELLO' | translate }} </h1>

Note: Make sure this key of is declared in JSON file otherwise it will not translate the value instead it will directly print the key “HELLO” as it is.

Now let’s talk about the TranslateService, it can be used for both, to change the current language of an app and to translate JavaScript values in an application.
 
To use the TranslateService in your app you must first import it and set the default language. 

app.component.ts

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

@Component({
    selector: 'page-schedule',
    templateUrl: 'schedule.html'
})
export class SchedulePage {
    constructor(translate: TranslateService) {
        translate.setDefaultLang('en');
    }
}

Here, translate.setDefaultLang(‘en’) is set default language and we change here to language as we added in out project.

Hope this blog helped you feel free to share your feedbacks/queries, also need assistance regarding Ionic App Development then get in touch with us.