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.

4 comments:

  1. Replies
    1. Big data is a term that describes the large volume of data – both structured and unstructured – that inundates a business on a day-to-day basis. big data projects for students But it’s not the amount of data that’s important.Project Center in Chennai

      Spring Framework has already made serious inroads as an integrated technology stack for building user-facing applications. Corporate TRaining Spring Framework the authors explore the idea of using Java in Big Data platforms.

      Spring Training in Chennai

      The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training

      Delete
  2. WoW! What a fantastic Authority links for this man i have getting many Google Stacking links and get improve our website in california Here is a freelance Highly Recommended! Buy Now Google Stacking

    ReplyDelete