Internalization in ionic is a way to develop multilanguage app. Most of client/users belonged to different. So we need local language in app according to country.

Let’s continue on code part :-

We need package i.e @ngx-translate/core , so go to terminal and type

@ngx-translate/core ionic
npm i @ngx-translate/core –save

After installing “ngx translate” package . Then go to “assets” folder and make a new folder “i18n”. Inside the “i18n” folder, we need to create language JSON file such as “en.json” “fr.json”.

i18n in ionic internalization structure

Go to “en.json” file and paste given below .

"GOOGLE" :"Google is my friends", 
"TESTINGLANG" : [ {"INDEX" : "0" , "DATA" : "data 0"} ,   {"INDEX" : "1" ,  "DATA" :  "data 1"}]

"GOOGLE" :"Google est mon ami",
"TESTINGLANG" : [ {"INDEX" : "0" , "DATA" : "données 0"} ,
    {"INDEX" : "1" ,  "DATA" :  "données 1"}]

Then go to “app.module.ts” and import “HttpClientModule and “TranslateModule”. Paste given below Code.

// import on header of app.module.ts Internalization  Point of view 
import {HttpClientModule, HttpClient} from '@angular/common/http';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);

//internalization  End block

///inside to imports[]  block and type 
    // for internalizaion  Point of view ,  

    loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]

 // internalization  End  Block

After that, Go to component or pages where you want to use it. In this scenario .i am taking “”. So simply inject translate services , and “TranslateModule.forChild()” module on tab1.module.ts. i will break this point into for better understand .

  1. “tab1.module.ts” file — > imports : [TranslateModule.forChild()]
using internalization translate pipe in ionic

2.Generates new service to manage all translation . Go to terminal and write “ionic g service translate-handler”. Then paste given below code on translate-handler.service.ts

import { Injectable } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
  providedIn: 'root'
export class TranslateHandlerService {
  selectTransData: any;

  constructor(  public  translate  :  TranslateService)  {

getSelectionData ( data) {
  this.translate.use( data)

  // this.translate.get('GOOGLE').subscribe((data)=>{
  //   console.log(data  ,   "$data for testing lang");
  //   this.selectTransData  =  data 
  // })
    console.log(data  ,   "$data for testing lang");
    this.selectTransData  =  data 

Go to and paste given below.

//  Import  Two service on header on  page.ts
import { TranslateService } from '@ngx-translate/core';
import { TranslateHandlerService } from '../translate-handler.service';

//Add Given below code on the class block
 arrayData: any;

  selectData  :  string;
  constructor(   public  translate: TranslateService ,  
     public  translateHadlerServices :  TranslateHandlerService) {

      console.log(data  ,   "data for testing lang");
      this.arrayData  =  data ;

this.translateHadlerServices.getSelectionData( this.selectData)


then go and paste given below code .

<ion-header [translucent]="true">
      Tab 1

<ion-content [fullscreen]="true">
        <ion-label>change language</ion-label>
        <ion-select placeholder="Select One"   (ionChange)="manageSelection()"   [(ngModel)]="selectData"  >
          <ion-select-option value="en">English</ion-select-option>
          <ion-select-option value="fr">French</ion-select-option>
  <ion-header collapse="condense">
      <ion-title size="large">Tab 1</ion-title>

  <!-- <a href=" out mailto!">First Example</a>
You can also add text into the body of the message by adding &body=body to the end of the tag, as shown in the example below.

<a href=" out mailto!&body=This is only a test!">Second Example</a> -->

<h1>   {{ 'GOOGLE' | translate}}</h1>

<div  *ngIf="arrayData" > 
  <div *ngFor="let item of translateHadlerServices.selectTransData">
    {{item    |  json}}


  <!-- <app-explore-container name="Tab 1 page"></app-explore-container> -->

If you want to change language automatically according to country. If that language available in app. Simply to go to “app.component.ts” , and write inside the block “this.platform.ready()”. Please follow given below to better understand .

add translate service in ionic app.component.ts
import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { TranslateService } from '@ngx-translate/core';

  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
export class AppComponent {
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar , 
    public  translate: TranslateService
  ) {

  initializeApp() {
    this.platform.ready().then(() => {
 //  Translate start Block Here 
      let autoSetLang  =  this.translate.getBrowserLang()  !=   undefined  ? this.translate.getBrowserLang() :  'fr' // 
//  Translate End  Block  Here 
how to use multilanguage in ionic

Grab code from github and please follow on twitter

Leave a Reply