1

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?

enter image description here

Nikhil Bharadwaj
  • 867
  • 4
  • 24
  • 42

2 Answers2

1

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

adrisons
  • 3,443
  • 3
  • 32
  • 48
0

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.

Nikhil Bharadwaj
  • 867
  • 4
  • 24
  • 42