Virtual Scroll

Coordinate headers with Angular CDK virtual viewports. Call this after Installation.

import { VirtualScrollHeaderDirective } from '@rdlabo/ionic-angular-scroll-header';

@Component({
  ...
  imports: [
    VirtualScrollHeaderDirective
  ],
})

<ion-header class="hidden"><ion-toolbar></ion-toolbar></ion-header>
<!-- set hidden header for safe-area -->
<ion-content rdlaboVirtualScrollHeader>
  <ion-header>
    <ion-toolbar>...</ion-toolbar>
    <!-- Default Header for display -->
  </ion-header>
  <cdk-virtual-scroll-viewport
    minBufferPx="900"
    maxBufferPx="1350"
    [itemSize]="44"
    class="ion-content-scroll-host"
  >
    ...Your Content
  </cdk-virtual-scroll-viewport>
</ion-content>

Fix https://github.com/angular/components/issues/27104

bug(COMPONENT): CDK Virtual Scroller jump back/flickers to items on top #27104

import { FixVirtualScrollElementDirective } from '@rdlabo/ionic-angular-scroll-header';

@Component({
  ...
  imports: [
  FixVirtualScrollElementDirective
  ],
})

<ion-content>
  <cdk-virtual-scroll-viewport
    rdlaboFixVirtualScrollElement
    minBufferPx="900"
    maxBufferPx="1350"
    [itemSize]="44"
    class="ion-content-scroll-host"
  >
    ...Your Content
  </cdk-virtual-scroll-viewport>
</ion-content>