Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 4 - ionic 3 translation of text inside '.ts' file

I want to know how translate text in '.ts' file
basically it's a loading text

showLoader() { 
this.loading = this.loadingCtrl.create({
  content: 'Loading...'
});
this.loading.present();

  }

what I need is to text "Loading..." translated to "Chargement..." When language is set to french
thanks

like image 759
Hassan Avatar asked Sep 21 '17 09:09

Hassan


Video Answer


2 Answers

You can do it like below:

Note: I extracted this from my working code base.So please adjust as you wish. If you need further help please let me know.

presentLoader(): Loading {
    this.translate.get('Please_wait').subscribe(res => {
      this.content = res;
    });
    let loader = this.loadingCtrl.create({
      content: this.content
    });
    loader.present();
    return loader;
  }
like image 70
Sampath Avatar answered Oct 05 '22 22:10

Sampath


@Sampath's answer works perfectly but still, I wanted to add another way to do it, returning a Promise.

Since the get method is async, I'd prefer to create the Loading when the translation is ready, instead of creating it and then updating the reference to the content.

// Imports
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/toPromise';

// ...

presentLoader(translationKey: string): Promise<Loading> {
    return this.translate.get(translationKey)
            .toPromise()
            .then(translation => {

                // Create the loader
                let loader = this.loadingCtrl.create({
                    content: translation
                });

                // Present the loader
                loader.present();

                // Return the loader
                return loader;
            });
}

And you can use that method like this:

this.presentLoader('Please_wait').then((loader: Loading) => {
    // This code is executed after the loading has been presented...
    // ... You can use the loader property to hide the loader
});
like image 33
sebaferreras Avatar answered Oct 05 '22 23:10

sebaferreras