Bird
0
0

What is wrong with this Angular virtual scroll code?

medium📝 Debug Q14 of 15
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:
  1. Step 1: Check syntax of *cdkVirtualFor directive

    The correct syntax uses 'of' to iterate over items, not 'in'. Using 'in' causes a template error.
  2. 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.
  3. Final Answer:

    Using *cdkVirtualFor with 'in' instead of 'of' causes an error. -> Option D
  4. Quick Check:

    *cdkVirtualFor uses 'of', not 'in' [OK]
Quick Trick: Use 'of' with *cdkVirtualFor, not 'in' [OK]
Common Mistakes:
  • Using 'in' instead of 'of' in *cdkVirtualFor
  • Forgetting to set viewport height
  • Placing directive on wrong element

Want More Practice?

15+ quiz questions · All difficulty levels · Free

Free Signup - Practice All Questions
More Angular Quizzes