Friday, September 15, 2017

ion-affix: Sticky headers for Ionic framework

Fork me on GitHub

Inspired by Collin Donahue-Oponski initial idea shown in this gist and the fact that there was no implementation available for the current Ionic framework to make certain list headers sticky, I gave it a shot and created the small directive ion-affix.

Once installed via
npm install --save ion-affix
it has to be included in your app.module.ts:

To make any ion-list-header, ion-item-divider or ion-item (within ion-card) sticky you simply apply the ion-affix directive to it and pass a reference to the parent ion-content to it:


Demo:

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.