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.

Please provide enough code so others can better understand or reproduce the problem. — Community
– Community Bot, Commented Jan 11, 2023 at 17:08

Kaleem Ullah · Accepted Answer · 2023-01-16 10:12:33Z

0

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

answered Jan 16, 2023 at 10:12

Kaleem Ullah

367 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Cdk virtual scroll taking time rendering items after scrolling

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related