Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to Implement Internationalization in Ionic 2/3 & Angular4 Application

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 723
    Comment on it

    Internationalization is a way of implementation of a service and a product so they can understand to specific local language. Usually this process is known as translation or localization. In Ionic 3/ 4 and Angular 4 application we can use ngx-translate plugin for Internationalization.

    So, today's in this blog we will learn how to implement Internationalization in Ionic 2 | 3 And Angular4 application.

     

     

    First of all, We need create an Ionic project. I believe you have already created a work environment for Ionic application. If not here is the link for Ionic installation guide : Ionic installation guide

    After setup environment of Ionic application. We can use this plugin in the hybrid mobile applications. So, we can add platforms through following command :

    ionic cordova platform add android
    
    ionic cordova platform add ios

     

     

    To install the plugin run following command through CLI:

    npm install @ngx-translate/core @ngx-translate/http-loader --save

     

    To use ngx-translate we need to impot important modules in the app.module.ts

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

     

    Now include HttpClientModule and TranslateModule in the NgModule imports

    @NgModule({
        declarations: [
            MyApp
        ],
        imports: [
            HttpClientModule,
            TranslateModule.forRoot({
                loader: {
                    provide: TranslateLoader,
                    useFactory: HttpLoaderFactory,
                    deps: [HttpClient]
                }
            }),
        ],
        bootstrap: [IonicApp],
        entryComponents: [
            MyApp
        ],
        providers: [
          
            {provide: ErrorHandler, useClass: IonicErrorHandler},
            {
                provide: HTTP_INTERCEPTORS,
                useClass: TokenInterceptor,
                multi: true
            }
            
        ],
        schemas: [
            CUSTOM_ELEMENTS_SCHEMA
        ],
    })

     

    In the example we will be using two languages ( English and French). For English and French translation we need to create two different JSON file. Lets say one is English.JSON and second one is French.JSON. To save these files we need to open src then assets and create a new folder with name i18n and the name of the folder is predefined. Now save English.JSON and French.JSON in the i18n folder. The path of the folder like:

     

    src/ assets/ i18n/ English.JSON

    src/ assets/ i18n/ French.JSON

    Small example of how JSON file content looks like :

    {
        "Welcome": {
            "Heading": "Welcome to Translation tutorial",
            "Title": "ngx-translate",
            "button": "OK",
            "dismiss": "Cancel"
    
        },
    }

     

    Lets import the TranslateService in the app.component.ts and also add service in the constructor.

    import { TranslateService } from '@ngx-translate/core';
    constructor(private translate: TranslateService) {
    
        // Language array, Set default language English
    
        translate.addLangs(["English", "French"]); 
        translate.setDefaultLang("English");
        translate.use("English");
    
    } 

    In the above example we have set English as default language and using the English this time. We can add more languages to the array.

    To show how translation works let me create a simple home.html file

    <div class="row">
        <div class="col col-100">
            <label>{{'Welcome.Heading' | translate}}</label>
    
            <ion-list>
                <ion-item>
                    <ion-label>{{'Welcome.Title' | translate}}</ion-label>
                    <ion-select #langSelect (ionChange)="selectLanguage(langSelect.value)" okText="{{'Welcome.Button' | translate}}" cancelText="{{'Welcome.Dismiss' | translate}}">
                        <ion-option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">
                            {{ lang }}
                        </ion-option>
                    </ion-select>
                </ion-item>
            </ion-list>
        </div>
    </div>

     

    selectLanguage(language) {
        this.translate.use(language);
    }

     

    This is how we can implement Internationalization. Hope this will help you :)

    How to Implement Internationalization in Ionic 2/3 & Angular4 Application

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: