Ionic Multi Language

Search…

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.

Ionic Video Playlist

Getting Started

Last modified 8mo ago

Copy link

Outline

Translate your Ionic App

Creating the translation files

Setting the app's direction

Setting the default language

Translating our Ionic app

Getting your translation values