Building an Ionic Multi Language App | Internationalization in Ionic (2023)

PublishedJul 19, 2017

UpdatedJul 19, 2017


Building an Ionic Multi Language App | Internationalization in Ionic (1)

ByDayana Jabif

Follow me:

  • Ionic 3
  • UX
  • Localization
  • Internationalization
  • Ionic Native
  • Cordova

20 minutes read


    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.

    Building an Ionic Multi Language App | Internationalization in Ionic (2)
    Building an Ionic Multi Language App | Internationalization in Ionic (3)
    Building an Ionic Multi Language App | Internationalization in Ionic (4)
    (Video) How to Localise Your Ionic 4 App with ngx-translate

    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:


    (Video) Ionic 3 Starter Full App Theme Supports Multiple Language i18n

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


    { "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.


    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' };


    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 TranslateServicetranslate.get('HELLO', { value: 'Dayana' }).subscribe((res: string) => { console.log(res); //=> 'Hello Dayana'});


    You can also use the directive as follows:

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


    <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.


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


    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.


    <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 languagethis.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.

    Try Ionic 6 Full Starter App

    (Video) language translating in ionic apps

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

    • Understanding Web Components in Ionic Framework
    • Forms and Validations in Ionic
    • Facebook Login in Ionic
    • How to create a complete Ionic App from scratch
    • Ionic Capacitor Tutorial - Getting Started with Capacitor

    Kickstart your next Ionic app using

    Ionic Templates

    sale updated

    Building an Ionic Multi Language App | Internationalization in Ionic (9)

    Ionic 6 Full Starter App



    Ionic 6 is here with huge improvements. This ionic template is built using Angular and Ionic Framework latest versions and has everything you need to jump start your app development! Get Ion5FullApp and enjoy lots of carefully designed pages with the most required functionalities.

    • Angular 13
    • Ionic 6
    (Video) Ionic 4 Translation | Multiple Language | Translation | How to Change Language using Ionic 4

    Live Preview

    Buy Now

    Building an Ionic Multi Language App | Internationalization in Ionic (10)

    Deluxe Angular Bundle



    Over 250 ready made Angular & Ionic features and components. An infinite set of possibilities to build beautiful cross-platform apps with a huge discount.





    Buy Now

    Liked this Ionic Tutorial?

    Leave your comments below.

    (Video) App con múltiples idiomas, Ionic Translate Language, ngx translate ionic, multi language IONIC


    1. Multipurpose Ionic 5 App (RTL + Dark Mode + 15 Theme Colors + i18n Multi-Language Support)
    (Creative apps)
    2. 👩🏾‍💻 App con múltiples idiomas | IONIC + ANGULAR (2021) 📲🌎
    3. Ionic 3 Starter Full App Supports Multiple Language i18n
    (Afroza Yasmin)
    4. Creating a Password Management App Using Ionic Framework and Firebase
    (The Polyglot Developer)
    5. Build your first Ionic React app
    6. How to Build an Ionic 4 Multi App Project with Shared Angular Library
    (Simon Grimm)
    Top Articles
    Latest Posts
    Article information

    Author: Prof. An Powlowski

    Last Updated: 01/16/2023

    Views: 6559

    Rating: 4.3 / 5 (64 voted)

    Reviews: 87% of readers found this page helpful

    Author information

    Name: Prof. An Powlowski

    Birthday: 1992-09-29

    Address: Apt. 994 8891 Orval Hill, Brittnyburgh, AZ 41023-0398

    Phone: +26417467956738

    Job: District Marketing Strategist

    Hobby: Embroidery, Bodybuilding, Motor sports, Amateur radio, Wood carving, Whittling, Air sports

    Introduction: My name is Prof. An Powlowski, I am a charming, helpful, attractive, good, graceful, thoughtful, vast person who loves writing and wants to share my knowledge and understanding with you.