Cdk virtual scroll taking time rendering items after scrolling

Question

I am using an expansion panel inside cdk-virtual-scroll. In the header of the expansion panel, I have to show 4 values, which is causing a delay of nearly one second in rendering items while scrolling.

<mat-accordion multi>
<cdk-virtual-scroll-viewport itemSize="50" [minBufferPx]="700" [maxBufferPx]="1000" scrollWindow>
  <mat-expansion-panel *cdkVirtualFor="let item of items; templateCacheSize: 0;">
    <mat-expansion-panel-header>
      <mat-label>
        <mat-label> {{item.name}}</mat-label>
        <mat-label> {{item.startTime}}</mat-label>
        <mat-label> {{item.endTime}}</mat-label>
        <mat-label> {{item.status}}</mat-label>
      </mat-label>
    </mat-expansion-panel-header>
    <div>
      <div>{{item.detail}}</div>
      <div>
        <button mat-raised-button color="accent">OK</button>
      </div>
    </div>
  </mat-expansion-panel>
</cdk-virtual-scroll-viewport>
</mat-accordion>

When I try with a single value in the header of the expansion panel it works very smoothly, but when I show 4 values it slows rendering new items on scrolling.

Answer 1

I got rid of the slow rendering issue by removing templateCacheSize property from *ngVirtualFor or setting it to templateCacheSize: 30.