Why Virtual scrolling for large lists in Angular? - Purpose & Use Cases

The Big Idea

What if your app could scroll through thousands of items instantly without freezing?

The Scenario

Imagine you have a long list of hundreds or thousands of items on a webpage, like a contact list or product catalog. You try to show them all at once by rendering every item in the browser.

The Problem

Loading and rendering all those items at once makes the page slow and unresponsive. Scrolling becomes laggy, and the browser might even freeze or crash because it tries to handle too much data at the same time.

The Solution

Virtual scrolling only renders the items visible on the screen plus a small buffer. As you scroll, it dynamically adds new items and removes those that go out of view. This keeps the page fast and smooth no matter how large the list is.

Before vs After

✗ Before

for (let item of items) { render(item); }

✓ After

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

What It Enables

It enables smooth, fast scrolling through huge lists without slowing down the app or overwhelming the browser.

Real Life Example

Think of scrolling through your phone contacts app. Even if you have thousands of contacts, it feels instant and smooth because it only shows a few contacts at a time, loading more as you scroll.

Key Takeaways

Rendering all list items at once can crash or slow down your app.

Virtual scrolling renders only visible items to keep performance high.

This technique makes large lists feel fast and responsive.