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 thesrc/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 Englishes.json
for Spanishar.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) || ' '" tabIcon="home"> </ion-tab> <ion-tab [root]="tab2Root" [tabTitle]="('ABOUT' | translate) || ' '" tabIcon="information-circle"> </ion-tab> <ion-tab [root]="tab3Root" [tabTitle]="('CONTACT' | translate) || ' '" 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
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?
Enjoyed reading this Ionic Tutorial?
Subscribe to keep learning Ionic Framework! You will receive offers, new ionic tutorials and free code examples from IonicThemes.