Ionic 4 | Adding Multi Language Translation Feature in Ionic Application using ngx-translate

Mobile applications are built for a wide audience and different countries, so it’s sometimes become important to present your application to people in their local language.

In this post, we will talk about a powerful library popularly known as nxg-translate. Application text content can be translated into languages which are selected and have related JSON files in the assets folder.

How does the language translation work in an Ionic application?

Text content in the application needs to be translated into different languages by the developer and kept in JSON files, for example, English text will be available in en.json and the French language in a fr.json file. These files will be called by nxg-translate and language text will be rendered by a simple method very easily.

Start Implementation

Here we will create an Ionic 4 application which will get Browser language by default then provide radio selection to switch between languages.

Create an Ionic Application

Let’s create a new Ionic application using Ionic CLI and also a languageConfig service todo have translation related methods at one place.

Install Language Translation library

Run following npm commands to install the library in the application

Make changes in app.module.file to import translation library and HttpClientModule to load json language files.

 

Next, we need to create JSON translation files at this ‘assets/i18n/‘ location

en.json

ko.json

 

Now open the translate-config.service.ts file which we create on the start of the tutorial the add methods to get browser default language and a method to set the language by user action.

In getDefaultLanguage() method we are calling library’s getBrowserLang() method to get device default language.

setLanguage() method will be called by user action to load a specific JSON file to change application text. The use method can be called to change language at any time.

Finally, we are ready to implement the language translation feature on our Home page of the application.

In home.page.html replace the following code with radio selection of a language. Data from JSON files are displayed using translate pipe filter as shown below.

In home.page.ts file, we will call a getDefaultLanguage method in our service then call the setLanguage method on radio selection.

That’s it now you only need to add more JSON file similar to that for more language options for users to select.

5 thoughts on “Ionic 4 | Adding Multi Language Translation Feature in Ionic Application using ngx-translate”

  1. I have this following error here :

    ERROR Error: Uncaught (in promise): Error: Template parse errors:
    The pipe ‘translate’ could not be found
    [ERROR ->] {{ ‘CAT’ | translate:params }}

    How can I do to solve that ?

    1. You have to add:
      import { TranslateModule } from ‘@ngx-translate/core’;
      and TranslateModule.forChild() into pagename.module.ts

Leave a Reply

Your email address will not be published. Required fields are marked *