Ionic - Alert Strings Localization

ionic 3 translate
ngx-translate example
ionic 3 custom alert
ionic alert controller

I have multiple areas in the code (across multiple pages) that I wish to use the different languages. Instead of writing each function with an if-else condition, I want to have a separate file with all strings in EN and AR so that I can import based on what is needed. I am already using ngx-translate for the views translation (button, labels, etc.), but I want to figure out how to do the same or something similar for the actual typescript classes.

I looked at angular-translate and didn't understand how to use it.


let alert = self.alertCtrl.create({
                    title: 'Username Taken',
                    subTitle: 'The username you entered is already registered.',
                    buttons: ['Retry']

I will check to see which language option was selected by user (based on Events) and then want to have title, subtitle and buttons in English or Arabic or whatever other language I support.

I was facing the same problem with ionic 4 and ngx-translate. this is how I solve it. this is my ts file code

async presentAlert() {
const alert = await this.alertController.create({
  header: this.translate.instant('Alert'),
  subHeader: this.translate.instant('empty_fields'),
  message: this.translate.instant('enter_fields'),
  buttons: [this.translate.instant('ok')]

await alert.present();


this is my JSON file

"Alert": "Alert",
    "empty_fields": "Empty Fields",
    "enter_fields": "Enter Required Fields!!",
    "ok": "OK",

Internationalize alert title and message - ionic-v3, Object): Observable<string|Object>: Gets the translated value of a key (or an array this.translate.get("NO_NETWORK").subscribe(translation  An Alert is a dialog that presents users with information or collects information from the user using inputs. An alert appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app.

I used below code in ionic3

1st import translateService in ts
import { TranslateService } from '@ngx-translate/core';

2nd in app.module.ts add below:
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
imports: [

    this.translate.get(['Cancel','Ok']).subscribe(res => {
    //in res we will get translated data and fetch via key

How to Localise Your Ionic App with ngx-translate [v4], Good thing there is the great nxg-translate library that we can add to our app to easily localise all the strings! ionic-4-localisation. In this Quick Win  Basically, this implies the abstraction of the strings and all the locale/culture-sensitive bits of the application. Prerequisites Ionic uses AngularJS for a lot of the core functionality of the

He, the solution is simple, to make translation from the controller (.ts) is different from doing it from the view (.html). To do it from the controller follow the following steps:

1- Import the translation module. 2- Inject the translation object in the constructor of the page you want to use it. 3- Use the injected object to make the translation.

In code:

import { TranslateService } from '@ngx-translate/core';


constructor (public translate: TranslateService){

 let toast = this.toastCtrl.create({
  message: msg,
  duration: 4500

//Take a look to this funcion this.translate.instant("the key");



cordova-plugin-localization-strings, Cordova Plugin for handling localization strings on InfoPlist.strings and Localizable.strings on iOS, strings.xml on Android. AlertController Improve this doc An Alert is a dialog that presents users with information or collects information from the user using inputs. An alert appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app. It can also optionally have a title, subTitle and message.

How to translate in Ionic 4, Multi-language translation, OR internationalization-localization is a growing need for every app that wants to target international customers. Till date, majority of  Localization is extremely important for software, especially as your app grows. Can you imagine not speaking the language in which an app is written and still trying to use it? In the past, it was hard to do localization in Ionic 2, as there were no solid Angular 2 localization libraries, but now, t

i18N for Capacitor plugins. · Issue #872 · ionic-team/capacitor · GitHub, Normally, this is done using storing the localisation strings in the resource table in the Camera popup text not support change chinese #1066. Internationalize and Localize your Ionic 2 Application. The TranslateLoader loads the JSON files that contain the translated strings of the app. How to Add Localization to a React App.

Alerts & Notifications documentation for Angular, Alert, confirm, prompt dialogs, toast and snackbar notifications for Angular and Ionic 2/3/4/5 developer documentation. Page. Usage Options Events Methods Localization Typography Empty view Note Images Theming. Popup. Usage Options okText, String, 'OK', (Optional) - Text for the button which closes the dialog. Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards <!--t.>Ionic Docs

  • This is not very clear ....I imported the TranslateService class, and in the alert subtitle I tried to use String(this.translate.get("ALERT_USERNAME_TAKEN") ) but it didn't work.
  • Try the way I explain above, the get method, the function "get" return an Observable and "instant" is synchronous, personally I prefer instant. Check more in the doc of ngx-translate core.
  • pls read this…