Ionic 4 ngx-translate Tutorial

The tutorial demonstrates how to use ngx-translate third-party internationalization (i18n) library to build a multilingual Ionic 4 app.

For more details on using ngx-translate library, visit this documentation page.

Creating New App

In this tutorial, we will build a simple multilingual app using ngx-translate library.

  1. From the Apps tab, click Create new app.
  2. Select Ionic 4 application type and Blank template, enter an app name and click Create. You will see a Start page.

Setting up Internationalization

  1. On the left side, unfold the Project folder and go to App settings > Components.
  2. Enable the Internationalization checkbox.
Internationalization enabledInternationalization enabled

Internationalization enabled

  1. Then, create the first translation file. Select Create new > TypeScript, from the drop-down, select the Angular i18n language type and enter its name, e.g. en. To confirm, click Create Script.
New language TypeScriptNew language TypeScript

New language TypeScript

  1. Go back to App settings > Components.
  2. Set the default language of your app, for example, English. Enter the appropriate JSON File name in the Default Language box. Be sure that your default language and the typescript file have the same names.
Default languageDefault language

Default language

JSON Translation Files


The only limitation of using the ngx-translate library is that translation cannot be dynamically generated. Therefore, before you can use the library, you need to define translations for all the app texts.
Each language is stored in a separate JSON file. It is represented as a set of key-value pairs, where the key is an identifier used by ngx-translate to find the translation strings, and the value is the actual text in the specified language.

  1. First, let's create a dictionary for the English translation. On the left, open the previously created en TypeScript and add some JSON dictionary, e.g:
   "TITLE": "Hello!",
   "FOOTER": "made by: Appery",
   "Title_2": "Hello with ngx-translate!",
   "change": "Change language",
   "description": "Ooohh... did you just translate this text?",
   "data": {
     "name": "My name is {{value}} ",
     "name2": "My username is <q><i>{{value2}}</i></q>"
   "select": "select",
   "enter_name": "Please enter your name",
   "placeholder": "enter name",
   "button": "button",
   "listItem": "listItem",
   "search101": "search",
   "radiobutton": "radiobutton"
English translation TypeScriptEnglish translation TypeScript

English translation TypeScript

  1. Similarly, we need to create dictionaries for other languages. For example, let's create es and de JSON files, for Spanish and Deutch translations, respectively:
   "TITLE": "Hola!",
   "FOOTER": "hecho por: Appery",
   "Title_2": "Hola con ngx-translate!",
   "change": "Cambiar de idioma",
   "description": "Ooohhh.... ¿acabas de traducir este texto?",
   "data": {
     "name": "Mi nombre es {{value}} ",
     "name2": "Mi nombre de usuario es <q><i>{{value2}}</i></q>"
   "select": "seleccione",
   "enter_name": "Por favor, introduzca su nombre",
   "placeholder": "introducir nombre",
   "button": "pulsador",
   "listItem": "listItem",
   "search101": "búsqueda",
   "radiobutton": "radiobutton"
Spanish  translation TypeScriptSpanish  translation TypeScript

Spanish translation TypeScript

   "TITLE": "Hallo!",
   "FOOTER": "hergestellt von: Appery",
   "Title_2": "Hallo mit ngx-translate!",
   "change": "Sprache ändern",
   "description": "Ooohhh.... hast du gerade diesen Text übersetzt?",
   "data": {
     "name": "Mein Name ist {{value}} ",
     "name2": "Mein Benutzername ist <q><i>{{value2}}</i></q>"
   "select": "auswählen",
   "enter_name": "Bitte geben Sie Ihren Namen ein",
   "placeholder": "Name eingeben",
   "button": "button",
   "listItem": "listItem",
   "search101": "Suche",
   "radiobutton": "radiobutton"
German translation TypeScriptGerman translation TypeScript

German translation TypeScript

Building UI

Now, we are ready to build the app UI.

  1. Under the Pages folder, go to Screen1 and open its DESIGN panel.
  2. Click on the Toolbar title in the app screen and change it to ngx-translate app by editing the Text property on the right menu.
  3. Drag & drop the Text component to the screen, change its Text property to {{'Title_2' | translate}} and its Container property to h2.
**Toolbar Title** component**Toolbar Title** component

Toolbar Title component

  1. Drag & drop the Button component to the app toolbar. Change its Text property to EN. Also, change its Slot property to Primary to move it to the right of the toolbar.
Defining the **EN** buttonDefining the **EN** button

Defining the EN button

  1. Create two more similar language switching buttons with their Text properties ES and DE, respectively.

The resulting app UI:

App UI viewApp UI view

App UI view

Defining Application Logic

  1. Click the EN button (Button1) and expand the EVENTS tab from the bottom.
  2. There, for the Button1 component Click event, select Run TypeScript for action.
  3. In the editor, click Insert snippet and select the i18n set language snippet.
Inserting the **i18n set language** snippetInserting the **i18n set language** snippet

Inserting the i18n set language snippet

  1. In the code, change the text "lang_name" to "en" and click Save.
Setting language name in TypeScriptSetting language name in TypeScript

Setting language name in TypeScript

  1. Repeat steps 1 through 4 to create the similar events for the ES and DE language switching buttons. Use the appropriate translation name for each language:
  1. Click the Save button to save all the changes.

App Testing

Now, you are ready to test your app. Сlick the TEST button in the App Builder to launch your app in the browser.

When the app starts, click the language buttons in the toolbar. Make sure that the app language switches on click:

App in actionApp in action

App in action

More Details

We can also use the Translate service with parameters. They are passed as an object, and the keys can be used in the translation strings. Let's give it a try.

  1. Open the Screen1 CODE panel.
  2. Here, create three variables:
    • variable name of String type with '' (empty string) default value
    • variable params of Any type with { value2: 'myusername' } default value
    • variable params1 of Any type with { value: 'John' } default value
App variablesApp variables

App variables

  1. Switch to the DESIGN panel.
  2. Drag & drop the Text component to the screen, change its Container property to h3, and its Text property to the following value:
{{ '' | translate:{value:'Andreas'} }}
Defining **Text2** componentDefining **Text2** component

Defining Text2 component

  1. Drag & drop another Text component to the screen, change its Container property to p, and its Text property to the following value:
{{ '' | translate:{value:} }}
**Text3** component parameters**Text3** component parameters

Text3 component parameters

  1. Under the Text component that we've just created, drag & drop the Input component. Set its properties to the following values:
    • [(ngModel)] property to name
    • Placeholder property to {{ 'placeholder' | translate }}
    • Text property (unfold Label) to {{ 'enter_name' | translate }}:
**Input** component parameters**Input** component parameters

Input component parameters

  1. Finally, drag & drop the last one Text component to the screen. Change its Container property to p, and the Text property to the following value:
{{ '' | translate: params1 }}
**Text4** component parameters**Text4** component parameters

Text4 component parameters

Advanced Attributes

You can also use the advanced attributes [translate] and [translateParams] for translations.

For example, let's add the Card component to Screen1. Inside the Card, choose the CardItemTitle component (for your convenience, you can use the OUTLINE panel to select it).

For the CardItemTitle component, add the property [translate] with the value '', and the property [translateParams] with the value {value: 'test value'}.

Defining **CardItemTitle** componentDefining **CardItemTitle** component

Defining CardItemTitle component

Finally, we are ready to test the app. In the top menu, click the TEST button to test the app. When the app starts, it should work as follows:

Advanced app performanceAdvanced app performance

Advanced app performance


If the translation text contains some HTML code, you should perform translation via binding to the [innerHTML] property.

In our previously created translation files, the data.name2 value contains HTML code:

**data.name2** value in code**data.name2** value in code

data.name2 value in code

So, let's add one more component to our app.

  1. Go to the Screen1 DESIGN panel.
  2. Drag & drop the Text component to the screen and change its Container property to h4, and set its [innerHTML] property to the following value:
'data.name2' | translate: params
**Text5 innerHTML** property**Text5 innerHTML** property

Text5 innerHTML property

  1. Click the TEST button to test the app. When started, the app should show the formatted text (in our case, the text is "quoted" and has italics style):
Testing the appTesting the app

Testing the app


You might also like this Community video showing how to create an Ionic 4 application with multilanguage support: