Wednesday, April 20, 2016

Angular Material stacked toasts

Triggering multiple toasts in a row will result in only the last one being shown while the others are being hidden instantly. The material design specification limits the visible toasts to one by advising us to not stack them:
They should not be persistent or be stacked, as they are above other elements on screen.  http://www.google.com/design/spec/components/snackbars-toasts.html#snackbars-toasts-usage

While this makes sense from an UX perspective it would be nice as a developer to be certain that all toasts are eventually shown to the user and none is being skipped. We achieved this by wrapping $mdToast within a custom Notification service that takes care of delaying multiple triggered toasts.

On top of that the code below also takes care of a problem we run into when the same message was shown multiple times (showing a generic error message in a $http interceptor in case of a communication error). The toast is shown only once if the message is the same and it was triggered within a small time frame. Demo can be found here.