CODEWITHSUNDEEP
angularionic2
vishnu
vishnu

Reputation: 4599

Internationalize and Localize option using Ionic2/Angular2

I am developing an ionic2/angular2 app for Android mobile.

I want to provide option to user to choose language option in the login page.

Is there any way to do the app level Internationalization using ionic2/angular2?

I have not seen so many examples with device level Internationalization.

Upvotes: 2

Views: 412

Answers (2)

devX
devX

Reputation: 65

You can use ng2-Translate in Ionic2

First navigate to your project directory in your terminal. Then install ng2-translate by executing the following command

npm install ng2-translate --save

Now move to ./src/assets directory. Here, create a folder, let's say i18n. Now create json files holding key-value pairs. Like for an example:
en.json (./src/assets/en.json)

{
  "title":"Internationalization Example"
}

fr.json (./src/assets/en.json)

{
  "title":"Exemple d'internationalisation"
}

Now lets do some bootstrapping. Import the following in your app.component.ts file

import {HttpModule} from '@angular/http';
import {Http} from '@angular/http';
import {BrowserModule} from "@angular/platform-browser";
import {TranslateStaticLoader, TranslateLoader, TranslateModule} from 'ng2-translate/ng2-translate';

Now create a function createTranslateLoader() as:

export function createTranslateLoader(http: Http) {
  return new TranslateStaticLoader(http, './assets/i18n', '.json');
}

Add followings for @NgModule:

@NgModule({
 ---------
 ---------
 imports: [
 IonicModule.forRoot(MyApp),
 TranslateModule.forRoot({
   provide: TranslateLoader,
   useFactory: createTranslateLoader,
   deps: [Http]
  }),
 BrowserModule,
 HttpModule,
 ],
 exports: [BrowserModule, HttpModule, TranslateModule]
 ---------
 ---------
 })

Now open app.component.ts. First import TranslateService

import {TranslateService} from 'ng2-translate/ng2-translate';

Update your constructor and initialise the translation (below code is in the context of app.component.ts)

constructor(platform: Platform,private translate: TranslateService) {
  platform.ready().then(() => {
    // Verify your lacale
    var userLang = navigator.language.split('-')[0];
    console.log(userLang);

    //initialize ng2-translate
    this.initTranslation();
  });
}
initTranslation() {
var userLang = navigator.language.split('-')[0]; 
userLang = /(fr|en)/gi.test(userLang) ? userLang : 'en';

// Default language if file not found
this.translate.setDefaultLang('en');

// Change userLang = 'fr' to check instantly
this.translate.use(userLang);

this.translate.get("title", null).subscribe(localizedValue => console.log(localizedValue));

}

All set, so open your respective page.html file and use the following interpolation for translation

{{"key"|translate}}

In my case it would be

{{"title"|translate}}

That's all. For any assistance visit [Using NG2-Translate] : https://ionicframework.com/docs/v2/resources/ng2-translate/

Upvotes: 0

null canvas
null canvas

Reputation: 10613

You need these: 

TRANSLATE_PROVIDERS, TranslateService, TranslatePipe, TranslateLoader, TranslateStaticLoader

You can find them here, for example:

import {HTTP_PROVIDERS} from '@angular/http';
import {Component, Injectable} from '@angular/core';
import {TRANSLATE_PROVIDERS, TranslateService, TranslatePipe, TranslateLoader, TranslateStaticLoader} from 'ng2-translate/ng2-translate';
import {bootstrap} from '@angular/platform-browser-dynamic';

bootstrap(AppComponent, [
    HTTP_PROVIDERS,
    // not required, but recommended to have 1 unique instance of your service
    TRANSLATE_PROVIDERS
]);

@Component({
    selector: 'app',
    template: `
        <div>{{ 'HELLO' | translate:{value: param} }}</div>
    `,
    pipes: [TranslatePipe]
})
export class AppComponent {
    param: string = "world";

    constructor(translate: TranslateService) {
        var userLang = navigator.language.split('-')[0]; // use navigator lang if available
        userLang = /(fr|en)/gi.test(userLang) ? userLang : 'en';

         // this language will be used as a fallback when a translation isn't found in the current language
        translate.setDefaultLang('en');

         // the lang to use, if the lang isn't available, it will use the current loader to get them
        translate.use(userLang);
    }
}

source: https://github.com/ocombe/ng2-translate

Upvotes: 3

Related Questions