Introduction to Multi Language in Ionic

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

Nowadays, with so many websites to choose from, making applications available and user-friendly to a worldwide audience is super important. Also, it's a step forward in the name of user experience. Let's start with some definitions.

What is Internationalization?

Internationalization is the process of designing your app so that it can support various languages. It's 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 ngx-translate?

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

Why is Multi Language 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.

For this Ionic Translate tutorial, we built an example ionic angular app that you can reuse for your own project. As you can see on the following screenshots, our example app has three Tabs.

In the first one you can select a language from a list. Note that when Arabic is selected, the application text direction is converted to RTL (right to left). On the other tabs, you will see some basic content translated into the selected language.

In this tutorial we will explain how to build and translate this app with Ionic Framework and Angular.

Translate ionic app
Translate ionic app
Translate ionic app

Add ngx-translate to an Ionic app

As we mentioned earlier, we will use ngx-translate to internationalize our app. To install this library in your Ionic Angular app run the following commands:

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

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

Now, open your app.module.ts file and 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 do 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 add the following code inside the imports array.

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

Define the translation files

It's 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 have a pretty simple structure like the following:

en.json

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

es.json

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

Use the translations

There are different ways that you can use to get your translation values: TranslatePipe, TranslateService or TranslateDirective. Let's see how to use each of them.

TranslatePipe

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

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

And in your component define param like this:

param = { value: 'Dayana' };

TranslateService

We can use the service both to change the current language of the application and also to translate JavaScript values. To use the TranslateService you need to import it and set the default language.

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

// Init the TranslateService for your application:
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');
}

// get your translation values using the TranslateService
translate.get('HELLO', { value: 'Dayana' }).subscribe((res: string) => {
  console.log(res);
  //=> 'Hello Dayana'
});

TranslateDirective

You can also use the directive as follows:

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

or

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

Translating our Ionic demo app

As mentioned before, the demo app we built for this tutorial 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. For this use 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 Translate Ionic Tabs?

Translate or 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>

Ionic App text direction - RTL support

To go the extra mile we also added RTL support to this demo app. 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);
  }
});

Wrapping up

Nowadays, with so many websites to choose from, making applications available and user-friendly to a worldwide audience is super important. Also, it's a step forward in the name of user experience. In this Ionic tutorial we explained how to create an Ionic application with multi language support.

We saw the differences between Internationalization and Localization and how to do both of them in Ionic Apps. Remember that you can download the demo app we built on this tutorial.

Multi language is just a tiny step in building a complete mobile app with Ionic. In our blog you can find lots of other tutorials that will guide you in the process of creating your Ionic App.

Did you know that we recently released Ionic 6 Full Starter App - PRO? It's an ionic 5 template that you can use to jump start your Ionic app development and save yourself hundreds of hours of design and development. And, of course, it has multi language support.

ionic starter app
Try Ionic 6 Full Starter App

These are some of my favourite Ionic tutorials. All of them include a free Ionic starter that you can reuse for your own project.