Ionic 5 Multilingual Sample App

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

This sample app​ demonstrates a multilingual app created with Ionic 5:

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

Downloads and Resources

You can also try it yourself by creating from the backup:

  1. Download the app backup file.
  2. Click Create new app.
  3. Click From backup and select the project backup file on your drive.
  4. Type in the app name.
  5. Click Create:

But if you are interested in the detailed tutorial, please follow the steps below.

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 5 > Ionic 5 Blank as the application type, enter an app name and click Create. You will see a Screen1 page.
  3. Select the Page component from the breadcrumbs (you can also use the OUTLINE view to locate the needed component) and set the page Footer property to False as we will not use it in the app (you will also be asked to confirm changing the property).

Setting up Internationalization

  1. On the left side, unfold the Project Tab 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"
  1. Similarly, we need to create dictionaries for other languages. For example, let's create es and de JSON files, for Spanish and German 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"
   "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 DESIGN panel.
  2. Click on the Toolbar title in the app screen and change it to Multilingual 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, replace the text "lang_name" with "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 in the App Builder Toolbar to save all the changes.

App Testing

Now, you are ready to test your app. Сlick the TEST button in the App Builder Toolbar to launch the 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 another 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 one more 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 }}
    • Label > Text property (unfold Label) to {{ 'enter_name' | translate }}:
**Input** component parameters**Input** component parameters

Input component parameters

  1. Finally, drag & drop one more 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 Card Item Title component (for your convenience, you can use the OUTLINE view to select it).

For the Card Item Title 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 in the App Builder** Toolbar 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 Textcomponent to the screen and change its Container property to h4, and add the [innerHTML] attribute with the following value:
'data.name2' | translate: params
**Text5 innerHTML** property**Text5 innerHTML** property

Text5 innerHTML property

  1. Click the TEST button in the App Builder Toolbar to launch the app in the browser. 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 application with multilanguage support:

Did this page help you?