CDK virtual scroll has no doms

Question

I'm using CDK virtual scroll to improve the performance of a dropdown which will have huge data. I have followed all the steps as per the documentation. But when I open the dropdown I don't see any dom with in cdk-virtual-scroll-viewport component.

Here is the code from HTML.

<cdk-virtual-scroll-viewport itemSize="500" class="example-viewport">
            <div *cdkVirtualFor="let item of items" class="example-item">{{item.name}}</div>
        </cdk-virtual-scroll-viewport>

If I move the div outside the cdk virtual scroll and replace it with ngFor it works fine. Any idea what could be the issue?

Answer 1

The problem was that the scrolling module was not imported in the correct module file. It didn't give any error but was giving just a warning.

Answer 2

That happens because your itemSize is too big for the container height.

virtual scroll uses itemSize to calculate the number of items that fit into your viewport.

You are setting 500px as the size for each item, which is the size of the full cdk-virtual-scroll-viewport container. Try setting a smaller itemSize.

Also, here's an example of virtual-scroll I made (it may help you): https://codesandbox.io/s/angular-virtual-scroll-biwn6