Angular CDK virtual scrolling issue

Question

Having issue to render huge list by using Angular CDK virtual scrolling. Need set the itemsize to 1 to load the list properly.

Expected to load the list according to viewport size. But it load far far more than the viewport size. which the viewport size is 20 items, it will load more than 200 items at once.

Example:

<cdk-virtual-scroll-viewport [itemSize]="1" style="height: 100%">
        <div *cdkVirtualFor="let item of items;
                   let index = index;
                   let count = count;
                   let first = first;
                   let last = last;
                   let even = even;
                   let odd = odd; templateCacheSize: 0">
            <app-group [item]="item" [index]="index"></app-group>
        </div>
    </cdk-virtual-scroll-viewport>

https://ionic-angular-v5-virtual-scroll-issue-cdk.stackblitz.io

The code is using Ionic 5 + Angular. The reason of not using Ion-virtual-scroll is refer to suggestion from the team. https://github.com/ionic-team/ionic-framework/issues/22792

Answer 1

The itemsize is the number of pixels per row so it may be trying to load more items than needed because it thinks your rows are each going to be 1px tall.

API reference for Angular CDK scrolling

itemSize: number - The size of the items in the list (in pixels).

Answer 2

I am facing this problem too when using ionic angular. But the problem did not exist if I use angular + angular material only. Furthermore, I can use autosize (remove itemSize property) in cdk-virtual-scroll-viewport. But beware of the version of cdk and cdk-experimental when installing. It should be the same version, otherwise you will get an error message.