How to add toast action button?

Ionic Framework ionic-v3
1

Hi, according to documentation toast will have a dismiss button. But native android toast can handle buttons like

“Selected message deleted, [Undo]”

How to add custom function button to toast? Is dismiss button will be use to another function?

Thanks

2

You can put another function to the onDidDismiss handler:

toast.onDidDismiss(() => {
this.customFunction();
});

Keep in mind to add ‘showCloseButton:true’ to the toast options and set up long ‘duration’ period.

1 Like
3

This function that on given example always runnning, even I do not click. But I want to run method only when push to custom close button. If toast hide on timeout must be nothing.

This is my code:

let toast = this.toastCtrl.create({
        message: "Message deleted",
        duration: 5000,
        showCloseButton: true,
        closeButtonText: "Undo"
    });
   
        toast.onDidDismiss(() => {
            console.log("Toast buton clicked");

            ///undo operation
        });
    toast.present();

console logs always showing “Toast buton clicked”

1 Like
4

I see, run a timer and check up if elapsed time < duration
Example:

    let duration:number = 5000;
    let elapsedTime:number = 0;
    let intervalHandler = setInterval( () => { elapsedTime += 10; },10);    
    let toast = this.toastCtrl.create({
    message: "Message deleted",
    duration: duration,
    showCloseButton: true,
    closeButtonText: "Undo"
});
    
    toast.onDidDismiss(() => {
        clearInterval(intervalHandler);
        if(elapsedTime < duration ) console.log("Toast button clicked");

    });

toast.present();
3 Likes
5

That is the solution :slight_smile: Actually i think like this but i look around non hacking style solution. Thanks

6

I would do this instead. Use a timeout to dismiss instead of rely on it being dismissed automatically.

      let t = this.toastCtrl.create({
        message: 'Data has been deleted',
        showCloseButton: true,
        closeButtonText: 'Undo'
      });
      let closedByTimeout = false;
      let timeoutHandle = setTimeout(() => { closedByTimeout = true; t.dismiss(); }, 5000);
      t.onDidDismiss(() => {
        if (closedByTimeout) return;
        clearTimeout(timeoutHandle);
        // Dismiss manually
        console.log('dismiss manually');
      });
      t.present();
8 Likes
7

I did this way, and work’s fine, but the toast don’t dismiss after… How can I do to dismiss the toast?

Thanks!

8

I resolved it using:

presentToast(msg,button,callback) {
 let duration:number = 4000;
 let elapsedTime:number = 0;
 let autoClose:boolean=true;
 
 let timeoutHandler = setTimeout( () => { toast.dismiss({autoclose:true}); },duration);

 let toast = this.toastCtrl.create({
   message: msg,
   showCloseButton: true,
   closeButtonText: button,
   position: 'bottom'
 });


 toast.onDidDismiss((data) => {
   clearTimeout(timeoutHandler);
   console.log('time elapsed',data);
     if(!data || !data.autoclose)
      callback()
 });
 toast.present();
}
9

Hi,

I found this solution on stackoverflow.
(http://stackoverflow.com/a/37459115/7439224)

toast.onDidDismiss((data, role) => {
  console.log('Dismissed toast');
  if (role == "close") {
    this.undoFunction();
  }
});

That worked great without time stopping.

23 Likes
12

This is a great solution, thanks!

13

In Ionic 4:

    toast.onDidDismiss().then(val => {
      if (val.role== "cancel") {
       //Action
     }
    });
1 Like
14

Thanks it helped me and if the dismiss is automatic after the duration then the role is backdrop.

15

Hey there! I have used this code, it worked very well. Thanks for helping.