Internationalize alert title and message


#1

Hi, I am using ng2-translate to internationalize my app, but how can I use it to dynamically translate my alert’s message and title, since I can only use (as far as I am concerned) ng2-translate pipe from the html?


#2

It’s in the documentation or I don’t get your question.

get(key: string|Array, interpolateParams?: Object): Observable<string|Object>: Gets the translated value of a key (or an array of keys)
instant(key: string|Array, interpolateParams?: Object): string|Object: Gets the instant translated value of a key (or an array of keys). /!\ This method is synchronous and the default file loader is asynchronous. You are responsible for knowing when your translations have been loaded and it is safe to use this method. If you are not sure then you should use the get method instead.

Example:

this.translate.get("NO_NETWORK").subscribe(translation => {
      this.text = translation;
});

#3

You need to reference Observed values in a way similar to this:

  private showLoginAlert() {
    
    let a: any = {};

    this.translationService.get('ALERT_TITLE').subscribe(t => {
      a.title = t;
    });

    this.translationService.get('ALERT_SUBTITLE').subscribe(t => {
      a.subTitle = t;
    });

    this.alertController.create({
      title: a.title,
      subTitle: a.subTitle,
      buttons: ['OK']
    }).present();
 }

#4

Maybe I’m missing something here, but how can you know that a.title and a.subTitle have the values you want for them at the time you call alertController.create()? I would think something like forkJoin would be necessary here.


#5

It is the power of rxjs’s Observable. You are passing a.title by reference to an object’s property. Those properties are populated asynchronously. Once the value comes through from the Observable’s Subscription it will automatically update in the alert’s object and get displayed.
Perhaps, I’m missing some intricacies here, but it works perfectly fine for me.


#6

Can you share your code please ? @vkniazeu


#7

I already have by simplifying my own function and removing all the unnecessary details from it. The function is above. This is literally all you should need, I think. If you need more, please take a look ng2-translate and ionic docs around translationService and alertController.


#8

After exploring all those docs, now I decided to pass the variable “languageSelected” to all the app modules, then I wrote different different functions with different different alert message languages based on selected language, totally my app has 8 alerts , and bilingual app, so now my alert function code got doubled.Waiting for best solution.


#9

I also face the same issue and at the end managed to solve the issue with similar solution as vkniazeu but much more straight forward.

this.translate.get(['title', 'label1', 'label2', 'label3', 'label4']).subscribe(text => {
      let alert = this.alertCtrl.create({
        title: text["title"],
        mode: 'ios',
        inputs: [{
          type: 'radio',
          label: text["label1"],
          value: 'test1',
          checked: true
        },
        {
          type: 'radio',
          label: text["label2"],
          value: 'test2',
          checked: false
        },
        {
          type: 'radio',
          label: text["label3"],
          value: 'test3',
          checked: false        
        }],
        buttons: [
        {
          text: text["label4"],
          handler: data => {
            // Your code to handle the button click
          }
         }]
      }).present();