scttcper / ngx-toastr

🍞 Angular Toastr
https://ngx-toastr.vercel.app
MIT License
2.52k stars 358 forks source link

onTap Event #273

Closed 1-0-1 closed 6 years ago

1-0-1 commented 6 years ago

I would like to have a link in my Toast so that the user can follow up on the displayed message. Unless there is a better way to handle this, I can use the onTap observable if the click Event is passed through so that I can determine if the link was clicked. Can you include the Event in the observable or suggest another way to do this?

Also with tapToDismiss false, the onTap observable is only fired the first time the toast is clicked.

scttcper commented 6 years ago

see the pink toast in the demo https://github.com/scttcper/ngx-toastr/blob/master/src/app/pink.toast.ts#L107-L112

Instead of subscribing to onTap subscribe to onAction which can also have an action passed through it.

1-0-1 commented 6 years ago

I'm sure I read in one of these posts someplace that the only way to use onAction was to extend toast and create your own custom one - like pink. I was hoping for something without that much overhead.

trevor-hackett commented 6 years ago

The problem is that what you want to do is very custom. We could add a custom toast component with a button to do what you're asking but then everyone will want something slightly different. Because of this it's very hard to please everyone.

What I would suggest is that instead of having a link, have the whole toast in general be the "link". Subscribe to the onTap observable and redirect/do what needs to happen. The onTap, generally shouldn't fire more than once. Toasts, in general, are dismissed then you tap/click on them. This is how Android, IOS, browsers, etc all display their toasts/notifications for the most part.

We could possibly only complete that observable when it is dismissed/removed. This would allow for multiple taps to flow through the observable.

1-0-1 commented 6 years ago

Yes, it's custom, but on my end. All I need is the Event so that I know what has been clicked. I'm not asking for any additional markup or functions. I don't want to display more info if they click the close button or click anywhere else on the toast.

"Toasts, in general, are dismissed then you tap/click on them."

Then why have a tapToDismiss flag? It would make more sense for the observable to continue to fire until the toast is actually dismissed/removed. I would consider it a bug otherwise. Of course you are free to disagree with me on that.

scttcper commented 6 years ago

yeah they're all currently fired once and closed https://github.com/scttcper/ngx-toastr/blob/master/src/lib/toastr/toastr-config.ts#L136-L153

1-0-1 commented 6 years ago

Is that good? intentional? or an issue that can be resolved?

scttcper commented 6 years ago

intentional

1-0-1 commented 6 years ago

Can you please help me understand the reasoning for that in conjunction with tapToDismiss=false?

1-0-1 commented 6 years ago

I have the same issue with onAction. It can only be fired once. If I wanted two buttons in my custom Toast using action or even wanted to toggle the button between "Undo" and "Redo", it won't fire the second time.

scttcper commented 6 years ago

I think its the same as material2's snackbar https://material.angular.io/components/snack-bar/overview

I can see allowing it to fire multiple times and it looks like we should be completing it when the toastr is completed which is probably a bug.

jek-bao-choo commented 6 years ago

Documentation required. Open as an issue. https://github.com/scttcper/ngx-toastr/issues/470