How to Localize Ionic Apps with ngx-translate (2023)

In several previous articles, we explored different ways of internationalizing Angular applications: with itsbuilt-in I18n solution and by enablingin-context translation editing. In this article, we are going to learn how to localize Ionic apps with the help of thengx-translate module. A framework built on top of Angular, Ionicallows for building cross-platform mobile applications and it was originally introduced in 2013. In this tutorial, we are using Ionic 5.

🗒Note »To get the source code for the demo app, make sure you stop by atGitHub.

The following topics are on our agenda:

  • How to create a Ionic app,
  • Integrating thengx-translate module into the app,
  • Setting a default locale and switching to another locale,
  • How to store translations and load them with an HTTP client,
  • Performing the actual translations and providing parameters to interpolate,
  • Working with translations inside the classes.

Shall we start?


If you would like to follow this tutorial, install the following:

  • NodeJS version 10 or higher and NPM. Earlier versions may work as well, but the app built with Ionic 5 would compile much slower.
  • Ionic 5, which is the most recent version at the time of writing this article; to install it, run npm install -g ionic and follow the given instructions.

This is pretty much it. After you are done, create a new Ionic application by running:

ionic start Translation tabs

tabs here is just the name of the template to use.

Next, after this command is done, you should be able to cd into the Translation directory and run:

ionic serve

As a result, the server will start and your browser should open alocalhost:8100 page with some boilerplate content.

Integrating ngx-translate

In order to translate our Ionic application, we will use ngx-translate, which is an open-source librarycreated by Angular enthusiasts.

Run the following command to install ngx-translate:

(Video) How to Localise Your Ionic 4 App with ngx-translate

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

Apart from the core library, we are also installing the http-loader, which is going to load JSON files for us.

Now let's import all the necessary modules. Open src/app/app.module.ts file and add the following lines:

// other imports here...import { TranslateModule, TranslateLoader } from '@ngx-translate/core';import { TranslateHttpLoader } from '@ngx-translate/http-loader';import { HttpClientModule, HttpClient } from '@angular/common/http';

Next, define an exported translations loader function:

// imports...export function createTranslateLoader(http: HttpClient) { return new TranslateHttpLoader(http, './assets/i18n/', '.json');}

This loader will fetch JSON files from the assets/i18n folder that we are going to create shortly.

Lastly, add all these modules to theimports property:

// imports and your loader...@NgModule({ declarations: [AppComponent], entryComponents: [], imports: [ BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule, // <--- add this TranslateModule.forRoot({ // <--- add this loader: { // <--- add this provide: TranslateLoader, // <--- add this useFactory: (createTranslateLoader), // <--- add this deps: [HttpClient] // <--- add this } // <--- add this }) // <--- add this ], providers: [ StatusBar, SplashScreen, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy } ], bootstrap: [AppComponent]})export class AppModule { }

Settings a Default Locale

To provide a default locale, we need to modify the src/app/app.component.ts file:

// other imports...import { TranslateService } from '@ngx-translate/core'; // add this@Component({ selector: 'app-root', templateUrl: 'app.component.html'})export class AppComponent { constructor( private platform: Platform, private splashScreen: SplashScreen, private statusBar: StatusBar, private translate: TranslateService // add this ) { this.initializeApp(); } initializeApp() { // other stuff... this.translate.setDefaultLang('en'); // add this }}

Here we are setting English as the default locale. If you would like to switch language, say this.translate.use('LANG_CODE'). Please note that if you do not, add this line after setDefaultLang, and the texts on the page won't be updated after language change (which is certainly an ngx-translate bug).

Performing Simple Translations

Okay, now let's translate something! Navigate to thesrc/app/tab1/ file and tweak the tab's title in the following way:

<ion-header> <ion-toolbar> <ion-title> {{ 'tab1.tabName' | translate }} <!-- modify this --> </ion-title> </ion-toolbar></ion-header><!-- other content goes here... -->

Here we are using thetranslate pipe and providing a translation key (tab1.tabName). In order to specify this translation, create two files inside the assets/i18n folder:

  • en.json
  • ru.json

Of course, you are free to choose any other locales, but I'm going to stick with English and Russian.

The dot inside the translation key means nesting, so the files should have the following contents:

(Video) Angular 13 Language Translations using ngx-translate - Multilingual Angular App


{ "tab1": { "tabName": "Tab One" }}


{ "tab1": { "tabName": "Первая закладка" }}

Nesting (or namespacing) is a very useful technique because it allows you to group related translations together. In this way, you may have namespaces like blog or admin. Also, keys under different namespaces may have the same names.

There is one last step we need to perform to make this work (yeah, I know, there is always some "last" and "very last step"). The tab pages are lazy-loaded. Therefore, we need to import the translation module into the child modules for the translations to work perfectly.

Open src/app/tab1/tab1.module.ts file and modify it like this:

// other imports...import { HttpClient } from '@angular/common/http';import { TranslateModule, TranslateLoader } from '@ngx-translate/core';import { TranslateHttpLoader } from '@ngx-translate/http-loader';export function createTranslateLoader(http: HttpClient) { return new TranslateHttpLoader(http, "./assets/i18n/", ".json");}@NgModule({ imports: [ // other stuff... TranslateModule.forChild({ loader: { provide: TranslateLoader, useFactory: createTranslateLoader, deps: [HttpClient] } }) ], declarations: [Tab1Page]})export class Tab1PageModule {}

In this way, we are enabling the translate pipe for the given child module.

After you have performed the above steps, reload the server. You should see that the title of the first tab now has the proper translation.

Passing Parameters to Translations

In some cases, you may need to pass parameters to your translation and interpolate it into the output string. Let me demonstrate how to do that:

<ion-header> <!-- header ... --></ion-header><ion-content> <ion-card> <ion-card-header> <ion-card-subtitle>Get Started</ion-card-subtitle> <ion-card-title>Welcome to Ionic</ion-card-title> </ion-card-header> <ion-card-content> <p translate [translateParams]="{ lang: language }">tab1.invite</p> <!-- add this --> </ion-card-content> </ion-card> <!-- other stuff ... --></ion-content>

Here we saying translate inside the p tag. Also, note the translateParams attribute which passes the actual parameters in the form of an object. lang is the parameter name, whereas language is the value. tab1.invite is our translation key.

Provide a value for this key now:


(Video) Angular Internationalization / i18n - Using ngx-translate & Phrase

{ "tab1": { "tabName": "Первая закладка", "invite": "Сейчас вы выбрали {{lang}}" }}


{ "tab1": { "tabName": "Tab One goes here", "invite": "Now you have selected {{lang}}" }}

The {{lang}} is interpolation — it will be replaced with the value of the language attribute passed in the template.

Now, the language variable should be defined somewhere, so let us do it inside the file:

import { Component } from '@angular/core';import { TranslateService } from '@ngx-translate/core'; // 1@Component({ selector: 'app-tab1', templateUrl: '', styleUrls: ['']})export class Tab1Page { language: string = this.translateService.currentLang; // 2 constructor(privatetranslateService:TranslateService){} //3}

I have pinpointed three lines of code to add:

  1. Import translation service
  2. Fetch the currently used language and store it inside the variable
  3. Inject thetranslation service to the page using Dependency injection

Finally, reload the page and observe the result!

Switching Locales

Of course, the user should be able to switch the app's locale using some kind of interface. Let's code this feature now!

First of all, tweak the markup by adding a new select box:

<ion-header> <!-- other stuff --></ion-header><ion-content> <ion-card> <!-- other stuff --> <ion-card-content> <p translate [translateParams]="{ lang: language }">tab1.invite</p> <ion-item> <!-- add this block --> <ion-label translate>Language</ion-label> <ion-select [(ngModel)]='language' (ionChange)='languageChange()' [placeholder]='"tab1.languageChangePlaceholder" | translate'> <ion-select-option value='ru'>Russian</ion-select-option> <ion-select-option value='en'>English</ion-select-option> </ion-select> </ion-item> <!-- add this block (end) --> </ion-card-content> </ion-card> <!-- other stuff --></ion-content>

So, what's going on here?

  • We are adding a new item labeled as "Language" (with the translate attribute).
  • The item contains a select box that is bound to the language model.
  • Whenever a new value is selected, fire a languageChange() method.
  • The select box also has a translated placeholder.

Next, take care of the event handler by modifying the file:

// other stuff...export class Tab1Page {// other code... languageChange() { // add this this.translateService.use(this.language); // add this } // add this}

By saying this.translateService.use(), we are actually switching the locale.

Also, let's take care of the translations for the label and placeholder:

(Video) language translating in ionic apps


{ "tab1": { "tabName": "Первая закладка", "invite": "Сейчас вы выбрали {{lang}}", "languageChangePlaceholder": "Выберите язык" }, "Language": "Язык"}


{ "tab1": { "tabName": "Tab One goes here", "invite": "Now you have selected {{lang}}", "languageChangePlaceholder": "Change language" }}

Note that I have not provided Language key at all for the English locale. Why? Well, because if the module cannot find the translation key, it will be simply printed out on the screen. For the English locale, this is totally fine, although you may also say "Language": "Language".

Execution Demo

If you reload the application, you can see the output as displayed below.

How to Localize Ionic Apps with ngx-translate (1)

Performing Translations in Classes

Sometimes you may want to work with your translations right inside the classes. Let me show you a quick example.

First, tweak file in the following way:

// other stuff...export class Tab1Page { private language: string = this.translateService.currentLang; private someProperty: string = ''; // 1 constructor(private translateService: TranslateService) { this.translateService.setTranslation('en', { // 2 'tab1.getStarted': 'Get Started', // add this 'someProperty': 'We can use translations in {{var}}' // 3 }); // add this this.translateService.get('someProperty', { var: 'classes' }).subscribe((res: string) => { // 4 this.someProperty = res; // 5 }); // add this } languageChange() { this.translateService.use(this.language); }}

Let us move step by step:

  1. Create a new property that will be displayed in the template later on.
  2. Programmatically load new translations for the English locale. Note that by doing this we are effectively wiping out all existing translations!
  3. Providing translation with interpolation
  4. Getting translation under someProperty key (and passing a value to interpolate). We are subscribing to an event and so once the response arrives...
  5. ...we assign the received values to the someProperty attribute.

As a result, you may utilize translations inside the template:

<ion-header> <!-- other stuff --></ion-header><ion-content> <ion-card class="welcome-card"> <!-- other stuff --> <ion-card-content> <p>{{someProperty}}</p> <!-- add this --> <p translate [translateParams]="{ lang: language }">tab1.invite</p> <!-- add this --> <!-- other stuff --> </ion-card-content> </ion-card></ion-content><!-- other stuff -->

Certainly, working with translation files is not easy, especially when the app is big and supports many languages. You might easily miss some translations for a specific language, which may lead to confusion among users. It is Phrase that can make your life easier:Grab your14-day trial!

Phrase supports many different languages and frameworks, including JavaScript, of course. It allows to easily import and export translation data. What is cool, you can quickly understand which translation keys are missing because it is easy to lose track when working with many languages in big applications. On top of that, you can collaborate with translators as it is much better to have aprofessionally done localization for your website.

(Video) Internationalize and Localize Your Ionic App With Ng Translate


In this article, we took a look at how to translate Ionic applications with the help of thengx-translate module. You have learned how to provide translations and load them, how to switch locales, how to perform interpolation, and how to work with translations inside classes.

So, as you see, localizing Ionic applications is not very different from translating Angular apps – as these two technologies have many similarities. I hope that you are now ready to apply the described concepts in real projects! As always, I thank you for staying with me and until the next time.

Last updated on October 27, 2022.


1. Switch Multiple Languages i18n using Ngx-Translate in Angular | Angular 14 Tutorial
(Technical Rajni)
2. Multilingual angular 8 apps with ngx-translate
(BlackBox Tech)
3. Ionic 4 Translation | Multiple Language | Translation | How to Change Language using Ionic 4
4. Internationalization and Localization with IonicFramework and Angular Translate
(The Polyglot Developer)
5. Angular Language Translations (i18n) using ngx-translate - Multilingual Angular App
(Scalable Scripts)
6. Angular 8 i18n example | internationalization
(BlackBox Tech)


Top Articles
Latest Posts
Article information

Author: Msgr. Benton Quitzon

Last Updated: 05/08/2023

Views: 6557

Rating: 4.2 / 5 (63 voted)

Reviews: 86% of readers found this page helpful

Author information

Name: Msgr. Benton Quitzon

Birthday: 2001-08-13

Address: 96487 Kris Cliff, Teresiafurt, WI 95201

Phone: +9418513585781

Job: Senior Designer

Hobby: Calligraphy, Rowing, Vacation, Geocaching, Web surfing, Electronics, Electronics

Introduction: My name is Msgr. Benton Quitzon, I am a comfortable, charming, thankful, happy, adventurous, handsome, precious person who loves writing and wants to share my knowledge and understanding with you.