Enappd
Published in

Enappd

How to translate in Ionic 4 — Globalization, Internationalization and Localization

How to translate in Ionic 4 — Globalization, Internationalization and Localization
  1. Translation Language — Detect the language you want to translate into. This can either be done automatically by detecting phone or browser’s language, OR, can be done with user actions (say, by using a dropdown).
    For our use case, we will detect device’s language using Cordova Globalization plugin.
  2. Prepare Language Text — You need to have a pre-translated dictionary (or JSON file) which stores the translations of all your app’s text in the Translation language. There are several ways to do this, as we’ll see in following steps. This is mostly a manual process for smaller apps, but you can use online tools like this for quick translations, or like POEditor for more standardized workflow.
  3. Translate — After the above two steps, you actually translate your app’s text to the Translation language text. We will use ngx-translate library for translating our texts.

Development Pre-requisites

Ionic:ionic (Ionic CLI)             : 4.11.0 
Ionic Framework : @ionic/angular 4.1.1
@angular-devkit/build-angular : 0.13.5
@angular-devkit/schematics : 7.2.4
@angular/cli : 7.3.5
@ionic/angular-toolkit : 1.4.0
Cordova:cordova (Cordova CLI) : 8.0.0
Cordova Platforms : ios 4.5.5
System:ios-deploy : 1.9.2
ios-sim : 5.0.13
NodeJS : v10.0.0 (/usr/local/bin/node)
npm : 5.6.0
OS : macOS Mojave
Xcode : Xcode 10.1 Build version 10B61

Outline

  1. Create a starter Ionic 4 tab app (I’ll tell later why I chose tab app)
  2. Prepare multiple language JSON files
  3. Implement ngx-translate library to detect and translate
  4. Implement a basic page layout to show translated text in browser
  5. Implement Cordova Globalization plugin to detect device language.
  6. Run the app on iOS simulator to translate by phone’s default language

STEP 1 : Create Ionic 4 app

ionic start yourAppName tabs// Change to app folder
cd yourAppName
// Start the app in browser
ionic serve

STEP 2: Prepare language JSON files

{
"TITLE": "Hello sir",
"TITLE_2": "Hello {{value}}","description": "Ooohh .... did you just translate this text ?","data": {"name": "My name is {{name_value}}"}
}
{
"TITLE" : "Bonjour Monsieur",
"TITLE_2" : "Bonjour {{value}}","description" : "Ooohh .... vous venez de traduire ce texte?","data" :{"name": "je m'appelle {{name_value}}"}}
{"TITLE": "Hola señor","TITLE_2": "Hola {{value}}","description": "Ooohh .... acabas de traducir este texto?","data": {"name": "Me llamo {{name_value}}"}}

STEP 3: Implement ngx-translate library

Install library

// Install core library
npm install --save @ngx-translate/core
// Install http loader
npm install @ngx-translate/http-loader --save

Setup the library and http-loader

export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http, "./assets/i18n/", ".json");
}

Setup the translate library in child component

import { TranslateService } from '@ngx-translate/core';
  • ionViewDidEnter() runs when the page loads. We then get default browser language using this._translate.getBrowserLang() (for browsers) and set a default language if no browser
  • Then we use this._translate.use(this.language) to tell the translation service which language to translate to (in our case English)
  • Important: Usethis._translate.get('TITLE').subscribe() function from translateService to asynchronously fetch translations. Here,
    - get() is the function to fetch translations.
    - TITLE is the key to search for in the JSON files. If the data is in a nested JSON, then we use the dot notation to fetch e.g. data.name
    - subscribe is used for asynchronous fetching (no need to use timeouts)
  • changeLanguage is called from user action. This function will use the previous two steps to translate to the intended language.

STEP 4: Basic page layout to show translated text

The Directive GOTCHA 😎

this._translate.get('TITLE').subscribe((res: string) => {           
this.title = res;
});
this._translate.get('description').subscribe((res: string) => {
this.description = res;
});
<h1>{{ title }}</h1><p>{{ description }}</p>
<h1 translate>TITLE</h1><p [translate]="'description'"></p>

STEP 5: Implement Cordova Globalization plugin

ionic cordova plugin add cordova-plugin-globalizationnpm install @ionic-native/globalization
import { Globalization } from '@ionic-native/globalization/ngx';constructor(private globalization: Globalization) { }
getDeviceLanguage() {
this.globalization.getPreferredLanguage().then(res => {
// Run other functions after getting device default lang
this._initTranslate()
})
.catch(e => console.log(e));
}

STEP 6: Run the app on simulator

ionic cordova platform add ios
ionic cordova prepare ios
ionic cordova run ios --target="iPhone-6s"

Conclusion

It’s great having you here, please click 👏 button and share 👭 this article to help others find it! Feel free to leave a comment below.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store