Contacts Screen in ionic2

I’m creating a contact screen just like the one in native’s. I’m using Ionic2 for implementing the same. I’ve completed the contact grouping and alphabetic scroll till now. But now I’m stuck in last implementation i.e the alphabet should be present as a sub header untill all the contacts starting with the same alphabet’s Last Name(grouping done based on Last name).
Right now when I scroll vertically in my app such subheaders isn’t formed as can be seen in the 1st screenshot.

Use ion-item-group instead of ion-list.

Will it create such dynamic alphabetic subheaders?

I don’t understand your question, sorry. Do you mean the letters on the right of the screen? I don’t think those are called subheaders. Indices maybe?

I’ve already implemented the indices on the right side of the screen. The feature I want to add is the Alphabets being present just beneath the header untill all the contacts starting with it are visible on the screen. I’ve attached 2 screenshots.The former is my current implementation. In the 2nd screeshot, I’ve marked in red the feature I want to implement. You can refer it

Sure. Use ion-item-divider with ngFor.

Edit to add: Don’t try to sort inside the template. That leads to all kinds of issues. Sort in your ts file, and set your *ngFor to increment when the first letter of the first (or last) name changes.

I’m using the same but I want the divider text to stay beneath the header untill all the items under it are scrolled out of the creen.

I see what you’re saying. You could define a toolbar, whose value is bound to a function of the yOffset of DOM elements. I don’t know anything out of the box that does that, but you could create a component that displayed a sorted list. The toolbar shows the letter of the item with the yOffset that is the smallest value greater than 0. I’m sure there are details to work out, but that’s the first strategy I would try. I think this is more a theming question than an Ionic question, so you might get better feedback from a CSS forum for example.

Does the sticky attribute on the divider help at all?

1 Like

This attribute is working fine on Lenovo K4 Note but not on Samsung S7 edge. Both have android version 6.0.1. Really confused on how and when it works. Can you help me with the same?