Tips and Tricks in a world of Mix

download.jpg

 

So I’ve started with Super starter for ionic angular template.

 

The problem was it was only english also it had i18n globalization multi lingual plugin

So I’ve found this and perfected it just a bit.

 

In ..\WebstormProjects\ionic3-angular4\src\pages\tutorial\tutorial.html

Added buttons getting the param of the language wanted :

<ion-header no-shadow>
  <ion-navbar>
    <ion-buttons end >
      <button ion-button (click)="translateTo('he')" color="primary">He</button>
    </ion-buttons>

    <ion-buttons end >
      <button ion-button (click)="translateTo('ru')" color="primary">Ru</button>
    </ion-buttons>

    <ion-buttons end >
      <button ion-button (click)="translateTo('he')" color="primary">He</button>
    </ion-buttons>


    <ion-buttons end *ngIf="showSkip">
      <button ion-button (click)="startApp()" color="primary">{{ 'TUTORIAL_SKIP_BUTTON' | translate}}</button>
    </ion-buttons>


  </ion-navbar>
</ion-header>

 

And in ..\WebstormProjects\ionic3-angular4\src\pages\tutorial\tutorial.ts

I’ve encapsulated the code of  initialization for reuse when the button is hit, so actually all I am doing is reinitializing the language and saying to translate provider want language to use using the parameter I’ve got from clicking the button.

constructor(public navCtrl: NavController, public menu: MenuController, public translate: TranslateService) {

  this.initTranslate();
}

initTranslate(){
  this.translate.get(["TUTORIAL_SLIDE1_TITLE",
    "TUTORIAL_SLIDE1_DESCRIPTION",
    "TUTORIAL_SLIDE2_TITLE",
    "TUTORIAL_SLIDE2_DESCRIPTION",
    "TUTORIAL_SLIDE3_TITLE",
    "TUTORIAL_SLIDE3_DESCRIPTION",
  ]).subscribe(
    (values) => {
      console.log('Loaded values', values);
      this.slides = [
        {
          title: values.TUTORIAL_SLIDE1_TITLE,
          description: values.TUTORIAL_SLIDE1_DESCRIPTION,
          image: 'assets/img/ica-slidebox-img-1.png',
        },
        {
          title: values.TUTORIAL_SLIDE2_TITLE,
          description: values.TUTORIAL_SLIDE2_DESCRIPTION,
          image: 'assets/img/ica-slidebox-img-2.png',
        },
        {
          title: values.TUTORIAL_SLIDE3_TITLE,
          description: values.TUTORIAL_SLIDE3_DESCRIPTION,
          image: 'assets/img/ica-slidebox-img-3.png',
        }
      ];
    });
}

translateTo(lang){
  this.translate.use(lang);
  this.initTranslate();
}

 

That easy. Now you are ready for the global world. 🙂

 

 

 

 

 

 


					
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Tag Cloud

%d bloggers like this: