Ionic Multi Language

Create a multi language Ionic application using Ionic 5 Full Starter App - PRO version.

Translate your Ionic App

This feature is only available in the PRO version.‌

We will use ngx-translate library which is the internationalization (i18n) library for Angular.‌

Creating the translation files

For this template we defined 3 languages:‌

• Spanish (es)

• English (en)

• French (fr)

Of course, you can use the languages that you need. You will find the translation files in the following path src/assets/i18nlanguage assets‌

You need to create one file per language that your app will support with the proper translations.‌

This translation files have a list of keys and values, for example this are some lines of the es.json file:

{  
    "FOLLOW": "Seguir",  
    "MESSAGE": "Mensaje",  
    "LIKE" : "Me gusta"
}

Setting the app's direction

‌At the begging of our src/app/app.component.html we need to add the following line so our ionic app can change the direction of the app depending on the selected language direction (RTL or LTR). Default is LTR.

<ion-app dir="{{textDir}}">

Setting the default language

‌In our src/app/app.component.ts you will find a setLanguage() method which takes care about initializing the TranslateService with the default language of our app.‌

Translating our Ionic app

‌In the template we decided to put the option to change the app's language inside the Profile page (src/app/user/profile). Once the user clicks the vertical dots next to the MESSAGE button the following modal will open:

change language in the profile page‌

If we select Spanish, the app will be translated to Spanish according to the translation values we set in our assets/i18n/es.json file.

translated page‌

Getting your translation values

‌There are different ways you can use this Translation module to translate your app. You can either use the TranslateService, the TranslatePipe or the TranslateDirective to get your translation values.‌

TranslateService

‌With the service, it looks like this:

translate.get('HELLO', {value: 'world'}).subscribe((res: string) => {
    console.log(res);
    //=> 'hello world'
});

‌We used the service to get the translations in our src/app/user/profile/user-profile.page.ts to use inside the Modal.‌

TranslatePipe

‌This is how you do it with the pipe:

<div>{{ 'HELLO' | translate }}</div>

‌You will find many examples of this usage in src/app/user/profile/user-profile.page.html‌

TranslateDirective

‌This is how you use the directive:

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

Or even simpler using the content of your element as a key:

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

‌You can find more information about how to use this library in https://github.com/ngx-translate/core#usage​

In the template we only translated the profile page. To translate all the pages just do the same procedure in each page.

Styles for RTL are not polished yet. We will do it in future updates.