Ionic-framework: Feature Request: Add Toast click handler

[bdoner]

[Feature request] Add click handler to Toast

It would be a nice feature with a click event on the Toast (backdrop).

The toast is a short message that's used to tell the user something has happened but interaction is not strictly required.
Being able to click the Toast as a way to interact with the newly obtained information if desired would make sense.

Clicking the toast would also close it.
The handler does not take any parameters.

Example:

Toast.create({
    message: `You have a new message!`,
    duration: 2000,
    click: () => {
        this.nav.push(ReadMessagePage);
    }
});

[jgw96]

Hello! So this functionality actually already exists! You can set the toast to close when it is clicked (and display a button) using the showCloseButton option, change that button text using the closeButtonText property and do an action when it is dismissed using toast.onDismiss(). Here is an example of all that put together

let toast = Toast.create({
    message: 'User was added successfully',
    showCloseButton: true,
    closeButtonText: WhateverIWantMyButtonToSay
  });

  toast.onDismiss(() => {
     //do action
    console.log('Dismissed toast');
  });

  this.nav.present(toast);

Is this the functionality you are looking for?

[bdoner]

The functionality you refer to is getting called when the toast is dismissed - no matter how it happens.
What I'm suggesting is a function that's only called when a user interact with the Toast.

[jgw96]

@bdoner Ahh ok, thanks for clearing that up and sorry i didn't understand fully at first!

[bdoner]

No problem :)

Will this issue be updated when you have considered it in the team?

[jgw96]

@bdoner Yep, i will update this issue as soon as i present it to my teammates (:

[jgw96]

We are still considering this, but i will update when we come to a decision (:

[andrefedalto]

This would allow a behaviour like google now cards have. When you swipe a card to dismiss it there is a toast where you can undo your action. With the current way the toast is implemented I don't have a way to replicate this behaviour, so +1 for actions inside the toast :)

[yannbf]

I too am feeling the need o having this behavior, exactly for an "undo" callback. Any news on its progress?

[lincolnthree]

Hey Folks,

This is somewhat achievable using the existing toast API, though there are issues:

• Device latency/timing can cause erroneous invocations.
• You can't have more than one action or button in the Toast (like "Dismiss" and "Undo")

I'd still love to see some real, supported functionality built in here.

```import { Injectable } from '@angular/core';
import { ToastController } from 'ionic-angular';

@Injectable()
export class UndoController {

constructor(private toastCtrl: ToastController) {
}

displayUndo(message: string, callback: any) {

    var displayedTime = new Date().getTime();
    let duration: number = 3500;
    let toast = this.toastCtrl.create({
        message: message,
        duration: duration,
        showCloseButton: true,
        closeButtonText: "Undo",
        dismissOnPageChange: false,
        position: "top"
    });

    toast.onDidDismiss(() => {
        let dismissedTime = new Date().getTime();
        if ((displayedTime + duration) > dismissedTime) {
            callback()
        };
    });

    toast.present();
}

}
```

[jgw96]

Hello everyone! Thanks for the feature request. I'm going to move this issue over to our internal list of feature requests for evaluation. We are continually prioritizing all requests that we receive with outstanding issues. We are extremely grateful for your feedback, but it may not always be our next priority. I'll copy the issue back to this repository when we have begun implementation. Thanks!

[jgw96]

This issue was moved to driftyco/ionic-feature-requests#40

[stalniy]

@jgw96 the link is broken

[imanube]

There are some workaround solutions here. I used the solution in post 9
https://forum.ionicframework.com/t/how-to-add-toast-action-button/61377/9

[rodriggochaves]

There is any update in this feature?

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.