Allow a click action in Toaster messages

[robertjorg]

Describe your idea

It would be nice to be able to have a click action in the toaster message when it appears. This would be similar to what ngx-toastr does with the onTap observable (https://github.com/scttcper/ngx-toastr). Once you click in the toaster another method would run. The toaster would function the same in every other aspect and does not have to always be clickable.

What problem are you trying to solve?

We get errors and want to allow the user to click the toaster to send a report back to us.

This is how you use ngx-toastr:

this._ngxToastService.error(errorMessage, 'File not found on server') .onTap .pipe(take(1)) .subscribe(() => { this._otherService.afterClick(yourParameter);}); }

The ngxToastService makes the needed call to ngx-toastr.

[andrew-frueh]

That's a great suggestion, and shouldn't be too hard to implement @robertjorg. Just a matter of adding an additional emitter you can subscribe to. We've got a big v12 release we're planning on announcing very soon, I might be able to slide this request in with that.

[andrew-frueh]

Quick question @robertjorg - the toast component does currently have the toastClosed property:

https://cashmere.healthcatalyst.net/web/components/toaster/api

which allows you to define a function to be called when the toast is closed. Would that work in your situation? Or do you specifically want a click on the toast to fire an event with or without closing (like if you have clickDismiss set to false).

[andrew-frueh]

Confirmed by @robertjorg that toastClosed does what they need.

[andrew-frueh]

Reopening - @robertjorg reported that they actually only want an event that's fired on clicks, not strictly close. toastClosed fires whether the user clicked to close, or the toast dismissed after it's set timeout. Recommend we add an additional hook called toastClicked to address this need.

[health-catalyst]

:tada: This issue has been resolved in version 12.2.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: