Building an Ionic 3 Multi Language App

What are we going to build?

As you can see on the images above, our example has 3 tabs. In the first one you can select your Language from a list of 3 options. Note that when Arabic is selected the text direction of the app becomes RTL.

Step 1: Add ngx-translate to the app

Run the following commands lines to install ngx-translate to your app. $ npm install @ngx-translate/core --save $ npm install @ngx-translate/http-loader --save

Open your app.module.ts file and add the following code:

• Import the following classes:

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

• By default ngx-translate will look for the translation json files in a folder i18n/, but for Ionic we must change this to look in the src/assets directory. To de this we should create a function that returns a new TranslateLoader:

  export function createTranslateLoader(http: Http) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
  }

• In NgModule imports array:

  imports: [
    IonicModule.forRoot(MyApp),
    TranslateModule.forRoot({
  	loader: {
  			 provide: TranslateLoader,
  			 useFactory: (createTranslateLoader),
  			 deps: [Http]
  		 }
    })
  ]

Step 2: Set up the translation assets (json files)

It is important to mention that you will have to create as many json files as languages you want to support. In this tutorial we have three json files:

• en.json for English
• es.json for Spanish
• ar.json for Arabic

These json files should have a pretty simple structure like the following:

en.json

{
	"HELLO": "Hello",
	"LOVE" : "Love"
}

es.json

{
	"HELLO": "Hola",
	"LOVE" : "Amor"
}

Step 3: Usage

There are different ways you can use to get your translation values: TranslatePipe, TranslateService or TranslateDirective.

The TranslatePipe

We will use this approach to translate static values in the application, such as a navbar title as shown below:

	<ion-title> {{ 'HELLO' | translate:param }} </ion-title>

	param = {value: 'Dayana'};

The TranslateService

We will use the service both to change the current language the app is using and to translate JavaScript values in the app. To use the TranslateService in your app you must first import it and set the default language.

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

constructor(translate: TranslateService) {
    // this language will be used as a fallback when a translation isn't found in the current language
    translate.setDefaultLang('en');

     // the lang to use, if the lang isn't available, it will use the current loader to get them
    translate.use('en');
}

translate.get('HELLO', {value: 'Dayana'}).subscribe((res: string) => {
    console.log(res);
    //=> 'Hello Dayana'
});

The TranslateDirective

<div [translate]="'HELLO'" [translateParams]="{value: 'Dayana'}"></div>

<div translate [translateParams]="{value: 'Dayana'}">HELLO</div>

Real example

As we mentioned before, the example we built has three tabs.

The following is the code of the About tab where you can see three different internationalized texts, where two of them have parameters. In this case we used the TranslatePipe.

about.html

<ion-header>
  <ion-navbar>
    <ion-title>
      {{ 'ABOUT' | translate }}
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <p>{{ 'HI' | translate:params }} </p>
  <p>{{ 'AGE' | translate:params }} </p>
</ion-content>

about.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-about',
  templateUrl: 'about.html'
})
export class AboutPage {
  params = {
    name: 'John Doe',
    age: '25'
  };

  constructor(public navCtrl: NavController) {}
}

How to Localize Tabs?

Localize the Tabs was a bit tricky so we want to share our solution with you. The following is the code we used to localize the Tabs title.

tabs.html

<ion-tabs>
	<ion-tab [root]="tab1Root" [tabTitle]="('HOME' | translate) || '&nbsp;'" tabIcon="home">	</ion-tab>
	<ion-tab [root]="tab2Root" [tabTitle]="('ABOUT' | translate) || '&nbsp;'" tabIcon="information-circle">	</ion-tab>
	<ion-tab [root]="tab3Root" [tabTitle]="('CONTACT' | translate) || '&nbsp;'" tabIcon="contacts">	</ion-tab>
</ion-tabs>

Text Direction - RTL support

To go the extra mile we also added RTL support.

To achieve this we have to add the app-direction attribute in src/theme/variables.scss

	$app-direction: multi;

Then in src/app/app.component.ts we subscribe to the onLangChange event from the TranslateService so we can change the text direction when the selected language is a RTL language such as Arabic.

//this is to determine the text direction depending on the selected language
this.translate.onLangChange.subscribe((event: LangChangeEvent) =>
{
if(event.lang == 'ar')
	{
		platform.setDir('rtl', true);
		platform.setDir('ltr', false);
	}
	else
	{
		platform.setDir('ltr', true);
		platform.setDir('rtl', false);
	}
});

Next Steps

Now that you’ve learned how to internationalize and localize your Ionic app, you can focus on:

• Ionic Navigation best practices
• Add Facebook Native Login to your Ionic App.
• Build a PWA with Ionic
• Add Google Login to your Ionic App
• Forms and Validation in Ionic
• Add Social Sharing and Deep Linking

Now that you’ve learned how to internationalize and localize your Ionic app, why don’t you give a chance to these beautiful Ionic Templates and apply this new knowledge?