Section headers - Migration from ion-virtual-scroll to cdk-virtual-scroll

Ionic Framework Ionic Angular
1

Hi there,
we are trying to switch from ion-virtual-scroll to cdk-virtual-scroll as described in the announcements for Ionic V6. This also works, but we have a big problem which we cannot solve so far.
With the ion-virtual-scroll it was possible to generate section headers via the headerFN function and then display them as *virtualHeader in the von-virtual-scroll.
Unfortunately, we cannot implement this function in the cdk-virtual-scroll.
Is there a possibility to create this?

Many thanks

2 Likes
2

I am facing this problem too. But I bet this is due to your source is from observable. Try different source of data

3

Yeah I’ve encountered the same problem. I (temporarely) fixed it like this:

<ion-list>
    <div *cdkVirtualFor="let item of listData; let index = index;">
      <ion-item-divider *ngIf="getGroupingName(item, index, listData); let header">
        <ion-label>{{ header }}</ion-label>
      </ion-item-divider>
      <ion-item (click)="onItemClick(item)" detail="true">
        <ion-label class="ion-text-wrap">{{item.description}}</ion-label>
      </ion-item>
    </div>
  </ion-list>

Basically using the same function but called differently. I do recommend using this with changeDetection strategy on push.

1 Like
4

bf-mi-1494’s is definitely the preferred solution. Worked like a charm!