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.

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

10
Leave a Reply

avatar
9 Comment threads
1 Thread replies
10 Followers
 
Most reacted comment
Hottest comment thread
10 Comment authors
AugustineashishChetanLuiz Antonio Jrvinod CH Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
MagicaNexus
Guest
MagicaNexus

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
Guest
Michal Stourac

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

Code Android example
Guest

verry good. thank admin share

Moises
Guest
Moises

Thanx a lot 😀

Squapl Magazine
Member

thanks for the tutorial. works great

vinod CH
Guest
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
Guest
Luiz Antonio Jr

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

Chetan
Guest
Chetan

i am getting the below error please check and resolve i have done all the thinks same as your tutorial.

ERROR Error: Uncaught (in promise): TypeError: this.languageService.getDefaultLanguage is not a function
TypeError: this.languageService.getDefaultLanguage is not a function

ashish
Guest
ashish

i am trying to translate my app english to nepali language so in ne.json is language is auto generate?

Augustine
Guest
Augustine

Thanks man.