Translate toast

Hey there, does anybody knows how to translate the text on a ToastController? I’m using ngx-translate and the way I implement this is:

contactAddedad() {
    this.translate.get('contactadded').subscribe(text => {
      let toast = this.toastCtrl.create({
        message: text["contactadded"],
        duration: 3000,
        position: 'bottom'
      });

      toast.onDidDismiss(() => {
        console.log('Dismissed toast');
      });

      toast.present();
    })
  }

But it does not work, only with static values like:

contactAdded() {
    let toast = this.toastCtrl.create({
      message: "contactadded",
      duration: 3000,
      position: 'bottom'
    });

    toast.onDidDismiss(() => {
      console.log('Dismissed toast');
    });

    toast.present();
  }
contactAdded() {

    let translation:string = this.translate.instant('contactadded');

    let toast = this.toastCtrl.create({
      message: translation,
      duration: 3000,
      position: 'bottom'
    });

    toast.onDidDismiss(() => {
      console.log('Dismissed toast');
    });

    toast.present();
  }

P.S.: If doesn’t work, check that your key “contactadded” is correct and that translate is correctly initialized

5 Likes

OK, it works, but you can explain me why? What was my error? What did I do wrong?

I think the error was text["contactadded"]

When you use this.translate.get('contactadded') you get the string (the value) as result. Wasn’t 100% sure with that but was sure that with .instant you get straight the value

Maybe the following would have work too:

contactAddedad() {
  this.translate.get('contactadded').subscribe(text => {
   let toast = this.toastCtrl.create({
    message: text, // here straight the text, it's probably not an object but a string
    duration: 3000,
    position: 'bottom'
  });

  toast.onDidDismiss(() => {
    console.log('Dismissed toast');
  });

  toast.present();
 })
}

I think, if you pass an array to .get you get an object as result. If you pass a string, then you get a string.

You’re right, when i print on consoletext it prints the translated value, printing text["contactadded"] it returns an object.

Well, I think I should change the whole code where I use translator. Thank you!

It’s funny, because it works on components like buttons, inputs, even with alerts, but no with toast.

Thank you very much!

maybe because for the other components you provide many keys to get and therefore get back object back? Not sure but that would explain it

this.translate.get('aString').subscribe(giveBackAString => {

this.translate.get('aString', 'a2ndString').subscribe(giveBackAnObject => {

Yes, like following

this.translate.get(['alerttitle', 'alerttext']).subscribe(text => {
      let actionSheet = this.actionSheetCtrl.create({
        title: text["alerttitle"],
        buttons: [
          {
            text: text["alerttext"],
            icon: 'images',
            handler: () => {
              this.accessGallery();
            }
          }
        ]
      }).present();
    })

This was the way I used in ToastController

Cool thx for the example. So what I stated is above is correct, good for you, you don’t have to modify the rest of your app :wink:

1 Like