[Solved] What is wrong with this Angular virtual scroll code?<cdk-virtual-scroll-viewport itemSize="50"> <div *cdkVirtualFor="let item in items">{{item}}</div> </cdk-virtual-scroll-viewport> | Angular

Angular - Performance Optimization

What is wrong with this Angular virtual scroll code?

<cdk-virtual-scroll-viewport itemSize="50">
  <div *cdkVirtualFor="let item in items">{{item}}</div>
</cdk-virtual-scroll-viewport>

AThe *cdkVirtualFor directive must be on the viewport, not the div.

BMissing style height on viewport causes no scroll.

CitemSize must be a number, not a string.

DUsing *cdkVirtualFor with 'in' instead of 'of' causes an error.

Step-by-Step Solution

Solution:

Step 1: Check syntax of *cdkVirtualFor directive
The correct syntax uses 'of' to iterate over items, not 'in'. Using 'in' causes a template error.
Step 2: Verify other attributes
itemSize can be a string representing a number, and style height is recommended but not syntax error. The directive must be on the repeated element, not viewport.
Final Answer:
Using *cdkVirtualFor with 'in' instead of 'of' causes an error. -> Option D
Quick Check:
*cdkVirtualFor uses 'of', not 'in' [OK]

Quick Trick: Use 'of' with *cdkVirtualFor, not 'in' [OK]

Common Mistakes:

Master "Performance Optimization" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

What is wrong with this Angular virtual scroll code?