Ionic Multi Language

Translate your Ionic App

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:

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.

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​