Bird
0
0

What is the issue with this Angular virtual scroll template?

medium📝 Debug Q6 of 15
Angular - Performance Optimization
What is the issue with this Angular virtual scroll template?
<cdk-virtual-scroll-viewport>
  <div *cdkVirtualFor="let item of items">{{item}}</div>
</cdk-virtual-scroll-viewport>
AThe <code>items</code> array must be declared in the template
BIncorrect directive syntax; should use *ngFor instead of *cdkVirtualFor
CMissing required <code>itemSize</code> property on <code>cdk-virtual-scroll-viewport</code>
DThe viewport height must be set via CSS for virtual scroll to work
Step-by-Step Solution
Solution:
  1. Step 1: Check required properties

    The cdk-virtual-scroll-viewport requires the itemSize property to know the height of each item for virtualization.
  2. Step 2: Analyze the template

    The template uses *cdkVirtualFor correctly and assumes items is defined in the component, which is valid.
  3. Step 3: Consider styling

    While setting viewport height is recommended, the critical error is the missing itemSize.
  4. Final Answer:

    Missing required itemSize property -> Option C
  5. Quick Check:

    Always specify itemSize for virtual scroll [OK]
Quick Trick: Always set itemSize on cdk-virtual-scroll-viewport [OK]
Common Mistakes:
  • Omitting itemSize property
  • Using *ngFor instead of *cdkVirtualFor
  • Not setting viewport height (less critical)

Want More Practice?

15+ quiz questions · All difficulty levels · Free

Free Signup - Practice All Questions
More Angular Quizzes