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: