Are you trying to add a multi-language translation feature in Ionic Application using NGX-translate?

This guide is for you.

As part of our Server Management Services here at Ibmi Media, as part of our Server Management Services, we regularly help our Customers to fix Application related tasks.

In this context, we shall look into the steps to perform printing in Ionic apps.

How does the language translation work in an Ionic application?

Text content in the application must be translated into different languages and kept in JSON files.

For example, English text will be available in en.json and the Malay text in my.json, and the Chinese text in ch.json files. Moreover, the NGX-translate calls these files.

Adding Multi-Language Translation Feature in Ionic Application using NGX-translate

Now have the look at the steps to add Multi-Language Translation Feature in Ionic Application.

1. Create an Ionic Application

First, we shall create a new Ionic application using Ionic CLI;

$ ionic start Multilingual blank –type=angular

2. Install Language Translation library

Next, we run the below npm commands to install the library in the application

$ npm i @ngx-translate/core @ngx-translate/http-loader

After that, we make changes in app.module to import translation library and HttpClientModule to load JSON language.

//app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { TranslateConfigService } from './translate-config.service';
export function LanguageLoader(http: HttpClient) {
return new TranslateHttpLoader(http, 'assets/i18n/', '.json');
}
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (LanguageLoader),
deps: [HttpClient]
}
})
],
providers: [
StatusBar,
SplashScreen,
TranslateConfigService,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule { }

3. Add the language files for each language

In Src/assets/i18n folder under create json files, we create 3 files for English, Chinese and Malay Languages. 

Here is how my files look like.

en.json
{
"HEADER": {
"language": "Language",
"logout": "Logout"
},
"LOGIN": {
"head": "Login",
"signup": "Sign Up",
"forgot": "Forgot Password?",
"account": "Don't have an account?",
"email": "Email Id",
"password": "Password",
"or": "OR"
}
}
my.json
{
"HEADER": {
"language": "Bahasa",
"logout": "Log keluar"
},
"LOGIN": {
"head": "Log masuk",
"signup": "Mendaftar ",
"forgot": "Lupa kata laluan?",
"account": "Tidak mempunyai akaun ? ",
"email": "ID emel ",
"password": "Kata Laluan",
"or": "ATAU"
}}
ch.json
{
"HEADER": {
"language": "语言",
"logout": "登出"
},
"LOGIN": {
"head": "登录",
"signup": "注册",
"forgot": "忘记密码？",
"account": "还没有帐号？",
"email": "电子邮件ID ",
"password": "密码",
"or": "要么"
}
}

4. Create languageConfig service to have translation-related methods in one place

Now we open the translate-configg.service.ts. Then we add methods to get browser default language and a method to set the language by user action.

//translate-config.service.ts

import { Injectable } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
@Injectable({
providedIn: 'root'
})
export class TranslateConfigService {
constructor(
private translate: TranslateService
) { }
getDefaultLanguage(){
let language = this.translate.getBrowserLang();
this.translate.setDefaultLang(language);
return language;
}
setLanguage(setLang) {
this.translate.use(setLang);
}
}

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

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

5. Using translation pipes to translate text in HTML pages

On the home.html page under the pages folder, we add the following code;

<ion-header>
<ion-toolbar>
<ion-title (click)="openLanguagePopover($event)">{{"HEADER.language" | translate}}</ion-title>
<ion-title>{{"LOGIN.signup" | translate}}</ion-title>
</ion-toolbar>
</ion-header>

In home.page.ts, we call a getDefaultLanguage method in our service. Then we call the setLanguage method Popover function.

//home.page.ts

import { Component } from '@angular/core';
import { TranslateConfigService } from '../translate-config.service';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
selectedLanguage:string;
constructor(private translateConfigService: TranslateConfigService){
this.selectedLanguage = this.translateConfigService.getDefaultLanguage();
this.popoverCtrl.dismiss();
}
languageChanged(){
this.translateConfigService.setLanguage(this.selectedLanguage);
}
}

Like this we can now add more JSON similar to that for more language options and also more data can be added to existing JSON files for different pages in the app. 

[Still, finding any difficulty in adding multi-language translation feature? – Our experts can help you.]