Angular · Middle · Question 75 of 75

How do you render a list of 10,000 rows without creating 10,000 DOM nodes?

<cdk-virtual-scroll-viewport itemSize="48" class="h-96">
  <div *cdkVirtualFor="let row of rows">{{ row.name }}</div>
</cdk-virtual-scroll-viewport>

✓Correct answer: Use virtual scrolling from the Angular CDK, which renders only the visible rows
2Use @for with track $index
3Wrap the list in @defer

Explanation

track helps reuse DOM nodes but doesn't reduce their number. Virtual scrolling keeps the DOM small; pagination is another option.

Further reading

Test yourself

Take the Angular · Middle quiz: questions and options are shuffled, and you get a review of your mistakes at the end.