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.
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:1
{
2
"FOLLOW": "Seguir",
3
"MESSAGE": "Mensaje",
4
"LIKE" : "Me gusta"
5
}
Copied!
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.1
<ion-app dir="{{textDir}}">
Copied!
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:.png?alt=media&token=602698b7-a4f7-41a1-9cd3-1e814296e9ad)
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.%20(1).png?alt=media&token=64d0b1b6-46ef-4334-af4c-37e014f8b796)
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:
1
translate.get('HELLO', {value: 'world'}).subscribe((res: string) => {
2
console.log(res);
3
//=> 'hello world'
4
});
Copied!
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:
1
<div>{{ 'HELLO' | translate }}</div>
Copied!
You will find many examples of this usage in
src/app/user/profile/user-profile.page.htmlTranslateDirective
This is how you use the directive:
1
<div [translate]="'HELLO'" [translateParams]="{value: 'world'}">
2
</div>
Copied!
Or even simpler using the content of your element as a key:
1
<div translate [translateParams]="{value: 'world'}">
2
HELLO
3
</div>
Copied!
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.
Last modified 2mo ago