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.

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.

Sunday, November 29, 2015

Using angular-busy to intercept all http request

We used angular-busy to show loading indicators on different parts of a web app based on a particular promise of a http request. This is really nice on desktop sized apps but on smaller devices we prefer to show one loader for all API calls. angular-busy doesn't come with a http interceptor to rule all them promises so we used the following one to do the trick. Plnkr can be found here.