[Solved] Which of the following is the correct way to use virtual scrolling in Angular template? — Ans: <cdk-virtual-scroll-viewport itemSize="50"><div *cdkVirtualFor="let... | Angular

Angular - Performance Optimization

Which of the following is the correct way to use virtual scrolling in Angular template?

A

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

B

<code><cdk-virtual-scroll-viewport itemSize="50"><div *ngFor="let item of items">{{item}}</div></cdk-virtual-scroll-viewport></code>

C

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

D

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

Step-by-Step Solution

Solution:

Step 1: Identify correct directive for virtual scroll
Angular CDK virtual scroll requires *cdkVirtualFor instead of *ngFor to render visible items only.
Step 2: Check syntax and itemSize usage
The itemSize attribute is required on cdk-virtual-scroll-viewport to set fixed item height for scrolling calculations.
Final Answer:
<cdk-virtual-scroll-viewport itemSize="50"><div *cdkVirtualFor="let item of items">{{item}}</div></cdk-virtual-scroll-viewport> -> Option C
Quick Check:
Use *cdkVirtualFor with itemSize on viewport [OK]

Quick Trick: Use *cdkVirtualFor, not *ngFor, inside cdk-virtual-scroll-viewport [OK]

Common Mistakes:

Master "Performance Optimization" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

Which of the following is the correct way to use virtual scrolling in Angular template?