Handle Toast Click

I want to handle a click event on a toast notification. I need to handle when the user clicks on the text (header or message) to navigate the user away. I know that I can use buttons, but I am using a button for a ‘cancel’ or ‘dismiss’ as well. I don’t want to use multiple buttons on the toast, because visually, they are hard to see and aren’t very intuitive.

Is there an easy way to handle this? I had tried the onclick and the ontouchend events of the toast notification that is created from the toast controller, but that does not work on device (works on web).

Any tricks to get this to work?

bumping this. Is this not possible? Can I handle the click event of the toast notification (not the buttons)?

Hey there! Can you share what you have so far? What’s the code look like? Kind of hard to know what the best way forward is without it.

Not sure if a code example is needed here, so I will explain a little more in detail before I try to mock something up.

I am creating a toast notification. I added a close button (icon) as:

buttons: [{
    side: 'end',
    role: 'close',
    icon: 'close'
}]

That works fine, and when they click on the close icon, I handle the onDidDismiss of the toast, I do what I need to do.

What I want to do, but don’t know how, is capture the click event if the user clicks on anywhere else in the toast, anything except the close button. I have seen that there is a ‘onclick’ and ‘ontouchend’ but they are not consistent on device vs web. Is there a built in function anywhere on the toast that is created that I can handle a click event.

Basically what I want to do is show a notification to a user, and if they click on the notification, I am going to navigate to a page. If they click on the cancel (X) icon, it will just close the notification (this is working).

Make sense?

Ah, ok, that makes sense. At the moment, Toast is not built for that. Going off Material and Apple Design guides, there should a defined button that can be used for that interaction.

I ended up developing an own toast component, because i want to have a swipe gesture and profile images as well

That sounds like something I could use. Swipe gestures would be nice here too. Was it a ton of work? Do you have it out on github anywhere? Did you integrate it how the current Toast works, using a toastcontroller?

In my current apps: No i didn’t. It’s hardcoded in the app. But i’m currently learning Stencil to provide it as a package