[Solved] Given this Angular component snippet:items = Array.from({length: 1000}).map((_, i) => `Item #${i}`);and template:<cdk-virtual-scroll-viewport itemSize="20" style="height:... | Angular

Angular - Performance Optimization

Given this Angular component snippet:

items = Array.from({length: 1000}).map((_, i) => `Item #${i}`);

and template:

<cdk-virtual-scroll-viewport itemSize="20" style="height: 100px;">
  <div *cdkVirtualFor="let item of items">{{item}}</div>
</cdk-virtual-scroll-viewport>

How many items are visible at once in the viewport?

A50 items

B20 items

C5 items

D100 items

Step-by-Step Solution

Solution:

Step 1: Calculate visible items from viewport height and itemSize
The viewport height is 100 pixels, each item is 20 pixels tall, so 100 / 20 = 5 items fit.
Step 2: Confirm no other factors affect visible count
Virtual scroll renders only visible items plus a small buffer, so visible count is 5.
Final Answer:
5 items -> Option C
Quick Check:
Visible items = viewport height / itemSize = 5 [OK]

Quick Trick: Divide viewport height by itemSize for visible count [OK]

Common Mistakes:

Confusing total items with visible items
Ignoring viewport height in calculation
Assuming all 1000 items render

Master "Performance Optimization" in Angular

9 interactive learning modes - each teaches the same concept differently

Learn Why Deep Visual Try Challenge Project Recall Perf

More Angular Quizzes

Given this Angular component snippet:

Step 1: Calculate visible items from viewport height and itemSize

Step 2: Confirm no other factors affect visible count

Final Answer:

Quick Check:

Want More Practice?