Multi Language

Internationalize and Localize your Ionic Framework App. Learn how we created a multi language app for Ion2FullApp Ionic Template, with RTL support.

We will use this plugin to change the language of the app. Run this command line to install ng2-translate to your app.

npm install @ngx-translate/core --save

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 3 json files:

• en.json for English

• es.json for Spanish

• ar.json for Arabic

To go the extra mile we also added RTL support.

We use this.translate.get(‘WORD’) anytime we want to translate the static text declared in .ts files.

In src/pages/settings/settings.ts you can find the code we execute when the user changes the preferred language.

In src/app/app.component.tsis where we define the default language for the app (in this case English) and we subscribe to changes in the preferred language so anytime the user changes the preferred language we can adapt the app accordingly, and for example set the app direction (RTL or LTR).

In this app we just added Arabic as a RTL language, but if you need to add another one you will need to include it in the following conditional from src/app/app.component.ts

this.translate.onLangChange.subscribe((event: LangChangeEvent) =>
      {
        if(event.lang == 'ar')
        {
          platform.setDir('rtl', true);
        }
        else
        {
          platform.setDir('ltr', true);
        }
...
}

Learn more by reading Internationalize and Localize Your Ionic App.