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.

Introduction

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:
928928

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.
11511151

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.
11361136

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.
11461146

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 Appery.io 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 Appery.io 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 Appery.io 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"
 }
776776

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.
12931293

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.
12951295

Defining the EN button

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

The resulting app UI:

509509

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.
852852

Inserting the i18n set language snippet

  1. In the code, replace the text "lang_name" with "en" and click Save.
this.Apperyio.translate.use("en");
15951595

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:
this.Apperyio.translate.use("de");
this.Apperyio.translate.use("es");
  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:

524524

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
705705

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:
{{ 'data.name' | translate:{value:'Andreas'} }}
10841084

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:
{{ 'data.name' | translate:{value: this.name} }}
10821082

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 }}:
10831083

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:
{{ 'data.name' | translate: params1 }}
12931293

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 'data.name' and the property [translateParams] with the value {value: 'test value'}.

13601360

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:

459459

Advanced app performance

Advanced

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:

437437

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
964964

Text5 innerHTML property

Testing App

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):

519519

Testing the app

Testing on Device

When your app version is ready, you might also like to test it on the device.

👍

Appery.io Tester App

A great option to quickly test the app on the device is to use our Appery.io Tester app.
The app is free and available for both iOS and Android.
You can check out this page to learn more about using the Appery.io Tester app.

464464

📘

Want to know more?

You might also like this Appery.io Community video showing how to create an application with multilanguage support:


Did this page help you?