Are you looking for steps for adding a multi-language translation feature in Ionic Application using NGX-translate? We can help you with it.

Here at Bobcares, we have seen several such App-related queries as part of our Development Services for developers.

Today, we will take a look at how to use 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 let’s see how our Engineers 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 below 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. Here are some screenshots for the same.

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

Conclusion

Today, we saw how our Engineers add a multi-language translation feature in Ionic Application using NGX-translate. In short, we do It by first creating an ionic app. Next, installing the Language Translation library. Then adding the language files for each language. After that, we create languageConfig service to have translation-related methods in one place. Finally, we use translation pipes to translate text into HTML pages