For those of you who never worked with previous translate implementations, this line:
 
{{ 'BUTTONS.btn_eng' | translate }}
 
will pull BUTTONS.btn_eng content from the currently active JSON file. Let’s say en is our currently configured language. BUTTONS.btn_eng will translate to this line:
 
"BUTTONS" : {
	"btn_eng" : "English"
}
 
But what if we want to provide translations directly in our JavaScript code? You can use this syntax:
 
translateService.setTranslation('en', {
	IN_APP : 'Internal app translation'
});

translateService.setTranslation('hr', {
	IN_APP : 'Prijevod unutar aplikacije'
});
 
You can also test it in the provided example, just uncomment above shown lines.
 

Source Code

 
In case GitHub repo is not available, and you can only use code provided below, this is what project folder looks like (image was taken from the Sublime text editor):
 
Ionic 2 Internationalization Folder Structure
 
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

export function HttpLoaderFactory(http: HttpClient) {
    return new TranslateHttpLoader(http);
}

@NgModule({
    declarations: [
        MyApp,
        HomePage
    ],
    imports: [
        BrowserModule,
        HttpClientModule,
        IonicModule.forRoot(MyApp),
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [HttpClient]
            }
        })        
    ],
    bootstrap: [IonicApp],
        entryComponents: [
        MyApp,
        HomePage
    ],
    providers: [
        StatusBar,
        SplashScreen,
        {provide: ErrorHandler, useClass: IonicErrorHandler}
    ]
})
export class AppModule {}
 
app.component.ts
import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

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

import { HomePage } from '../pages/home/home';

@Component({
    templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = HomePage;

    constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private translateService: TranslateService) {

        platform.ready().then(() => {
            statusBar.styleDefault();
            splashScreen.hide();

            translateService.setDefaultLang('en');
            translateService.use('en');            
        });
    }
}
 
home.html
<ion-header>
	<ion-navbar>
		<ion-title>{{ 'PAGE_TITLE' | translate }}</ion-title>
	</ion-navbar>
</ion-header>

<ion-content padding>
	<h2>{{ 'IN_APP' | translate }}</h2>
	{{ 'FOO' | translate:bar }}
	<!-- Segment in content -->
	<ion-segment [(ngModel)]="relationship" color="primary" (ionChange)="segmentChanged($event)">
		<ion-segment-button value="en">
			{{ 'BUTTONS.btn_eng' | translate }}
		</ion-segment-button>
		<ion-segment-button value="hr">
			{{ 'BUTTONS.btn_cro' | translate }}
		</ion-segment-button>
	</ion-segment>
</ion-content>
 
home.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

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

@Component({
	selector: 'page-home',
	templateUrl: 'home.html'
})

export class HomePage {

	bar = { "test": 'bar' };

	constructor(public navCtrl: NavController, private translateService: TranslateService) {

        /*translateService.setTranslation('en', {
            IN_APP : 'Internal app translation'
        });

        translateService.setTranslation('hr', {
            IN_APP : 'Prijevod unutar aplikacije'
        });*/
	}

	segmentChanged(event) {
		this.translateService.use(event._value);
	}
}
 
en.json
{
    "PAGE_TITLE" : "Translation tutorial",	
	"BUTTONS" : {
		"btn_eng" : "English",
		"btn_cro" : "Croatian"
	},
	"IN_APP" : "Internal app translation",
	"FOO": "Foo {{test}}"
}
 
hr.json
{
    "PAGE_TITLE" : "Uputstva za prijevod",	
	"BUTTONS" : {
		"btn_eng" : "Engleski",
		"btn_cro" : "Hrvatski"
	},
	"IN_APP" : "Prijevod unutar aplikacije",
	"FOO": "Bu {{test}}"
}
 

Deployment

 
Next step, build our application:
 
ionic build android
 
Be careful here, this step may break if you’re behind a firewall. The first execution will take a long time, so be patient.
 
Finally:
 
ionic run android -l -c -s
 
or if you want to test it in your browser:
 
ionic serve -l -c -s
 

Download The Code

 
Working GitHub repo link can be found below:
 
GitHub
 
 

Who Am I?

Between working as a senior Java developer in one of the largest insurance companies in the world and traveling, in my free time, I work as a professional mobile development adviser. I'm also a major jQuery Mobile supporter back at StackOverflow and a forum moderator at the official Ionic Framework forum.