Cdk virtual scrolling issue

Question

Does any one met the issue of angular 7 cdk virtual scrolling working abnormally in mat-tab group.

https://github.com/angular/material2/issues/13981

My city component template looks like that

<cdk-virtual-scroll-viewport class="list-container" [itemSize]="50" minBufferPx="200" maxBufferPx="400" (scrolledIndexChange)="getNextBatch($event)">
  <div *cdkVirtualFor="let state of statesObservable | async; trackBy: trackByFn" class="list-group-item state-item">
    <div class="state">{{state.name}}</div>
    <div class="capital">{{state.capital}}</div>
  </div>
</cdk-virtual-scroll-viewport>

When put this city component to the mat-tab-group as the second tab

<mat-tab-group>
  <mat-tab label="Country">
    <app-country></app-country>
  </mat-tab>
  <mat-tab label="City">
    <app-city></app-city>
  </mat-tab>
</mat-tab-group>

The result looks like below:

The stackblitz code is here: https://stackblitz.com/edit/angular7-virtual-scroll-issue

Does anyone have some idea for this issue?

Answer 1

You tell it to keep the Buffer size between 200px and 400px, yet your scroll window is much taller than that.

Change both the minimum and maximum to 1200px, this will keep the items cover your viewport, even when you scroll down for more items.

https://stackblitz.com/edit/angular7-virtual-scroll-issue-ftcnng

Answer 2

The question has been asked some time ago, but there is a solution which is not a workaround.

First you need the Viewport Reference:

@ViewChild(CdkVirtualScrollViewport, {static: false}) cdkVirtualScrollViewport: CdkVirtualScrollViewport;

Then you can call the Method checkViewportSize() when the size of the Viewport has changed. Before you call this method you need to update the style height of the Viewport container.

this.heightChange$.subscribe(() => {
    this.cdkVirtualScrollViewport.checkViewportSize();
});