CODEWITHSUNDEEP
htmlangularangular-materialangular-cdkangular-cdk-virtual-scroll
Nikhil Bharadwaj
Nikhil Bharadwaj

Reputation: 917

CDK virtual scroll has no doms

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

Upvotes: 1

Views: 1316

Answers (2)

adrisons
adrisons

Reputation: 3723

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

Upvotes: 1

Nikhil Bharadwaj
Nikhil Bharadwaj

Reputation: 917

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.

Upvotes: 0

Related Questions