Introduction

In this tutorial we will show you how to support different languages in your Ionic application using ngx-translate.

If you are wondering what are all these words and what's the difference between them you should read this section.

What is Internationalization?

Internationalization is the process of designing your app so that it can support various languages. It is also known as i18n.

What is Localization?

Localization is the process of translating your app into different languages. Before you can localize your app, you need to internationalize it. Localization is also known as l10n.

What is ng2-translate?

ngx-translate is the library we will use in this tutorial to internationalize and localize an Ionic app.

Why is this important?

An internationalized app looks as a native app in all the languages and regions it supports. The app stores are available in 150 different countries, and internationalizing your app is the first step to reach this global market.

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>
And in your component define param like this:
	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>
or
<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:

As you know we also sell beautiful mobile ionic templates and components that you may find super useful as they save you hours of development, time and effort, while giving your projects a great design from scratch.

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?