How to modify toast message in Ionic v3

#1

Hello,

I am trying to modify my toast message, rather than stacking up the toast boxes like so, I wanted to know if there is a possibility to update the message each time I do so. Here is my code.

          import { ToastController, Toast } from 'ionic-angular';
          
          private toastCtrl: ToastController;
          toast: Toast;
          try {
              this.toast.setMessage('Items '+itemCart+' | Rs '+this.total+'');
          } catch(e) {}
      
          this.toast = this.toastCtrl.create({
              message: 'Items '+itemCart+' | Rs '+this.total+'',
              showCloseButton: true,
              closeButtonText:'View Cart',
              position: 'bottom',
              dismissOnPageChange: true
          });
          this.toast.onDidDismiss(() => {
            this.navCtrl.setRoot(CartTabPage);
           });          
          this.toast.present();

Any help will be much appreciated. Thanks in advance

#2

Hi, @davidti
Can you share your whole code? and also describe exactly what kind of modification/update do you want each time so, that we can conclude what is the problem.

#3

Hi,

The code is pretty lengthy, but let me explain, the toast seems to be stacked up, so if one of the toasts dismiss, when I click on the close button which goes to the cart page, it shows the previous toast, which questions an issue as to why the toast is showing the wrong value, so rather than adding multiple toasts, just want to have one and then update the same value.

Thank You.

#4

so, you need to show this toast when you are going to redirect to the cart page right?

#5

No, basically the toast holds information of the cart, like 2 item | $50.00 and a view cart which is actually performing a dismiss toast. and on dismiss
this.toast.onDidDismiss(() => { this.navCtrl.setRoot(CartTabPage); });
It is going to the cart page. When it does the dismiss, it shows a previously stacked toast, which does not show the correct value eg. it will show 1 item | $25.00 even though there is a 2nd item in the cart. So rather than stacking up the toasts, I wanted to know if I could have a single toast and just update the toast message.

Do you require anymore information?

#6

No, I don’t want any other information but I didn’t understand why you’ve written this line

this.toast.setMessage('Items '+itemCart+' | Rs '+this.total+'');
As toast is already creating from this and message is also alreadt set there:

 this.toast = this.toastCtrl.create({
              message: 'Items '+itemCart+' | Rs '+this.total+'',
              showCloseButton: true,
              closeButtonText:'View Cart',
              position: 'bottom',
              dismissOnPageChange: true
          });
          this.toast.onDidDismiss(() => {
            this.navCtrl.setRoot(CartTabPage);
           });          
          this.toast.present();
#7

I wanted to use this this.toast.setMessage('Items '+itemCart+' | Rs '+this.total+''); just so we can update the message,

The following happens when when we press plus/minus, which adds to card, which is creating a new toast each and everytime.

 this.toast = this.toastCtrl.create({
              message: 'Items '+itemCart+' | Rs '+this.total+'',
              showCloseButton: true,
              closeButtonText:'View Cart',
              position: 'bottom',
              dismissOnPageChange: true
          });
#8

Okay then why don’t you call this toast for updated message also, I think it works fine for your requirement you don’t need to set message again you just need to call this toast and I think that set message toast is causing problem of showing two toast because it will call first from set message and then it will create new toast also. so, My suggestion is that use that toast only.
Hope it will help you I’ve shared my opinion as per my understanding of your problem info.
Thanks

#9

How do I call the same toast again? Yes I think if I do that instead of creating it, it should solve the problem

#10

You can create one function of that and then call that function wherever you want and whenever you want to show that toast something like this:

createToast(){
              this.toast = this.toastCtrl.create({
              message: 'Items '+itemCart+' | Rs '+this.total+'',
              showCloseButton: true,
              closeButtonText:'View Cart',
              position: 'bottom',
              dismissOnPageChange: true
          });
          this.toast.onDidDismiss(() => {
            this.navCtrl.setRoot(CartTabPage);
           });          
          this.toast.present();
}

and now you need to just call this function like this this.createToast() on button click of press/minus and from where you are showing the updated toast.

#11

Thanks, but will this not keep creating the toast again?

#12

But it will solve your problem of showing previous toast.

#13

Alright thanks, I will proceed with the implementation, and revert back, if there are any issues with the same.