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




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 replace the following code with radio selection of a language. Data from JSON files are displayed using translate pipe filter as shown below.

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

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

Leave a Reply

6 Comment threads
1 Thread replies
Most reacted comment
Hottest comment thread
7 Comment authors
Luiz Antonio Jrvinod CHSquapl MagazineMoisesMichal Stourac Recent comment authors
newest oldest most voted
Notify of

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 ?

Michal Stourac
Michal Stourac

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

Code Android example

verry good. thank admin share


Thanx a lot 😀

Squapl Magazine

thanks for the tutorial. works great

vinod CH
vinod CH

do i need to keep english.json ???

because i created one app with three languages so when I stared it works fine with three languages (link Telugu, Hindi, and English) but i didn’t create en.json just created two JSON files (Telugu and Hindi ) in the app but it worked fine after one month I tried to build that app now English is not working I don’t know why? any idea

Luiz Antonio Jr
Luiz Antonio Jr

What about the splash screen? Didnt find any article to show an unique splashscreen according to user mobile language