CDK Virtual Scrolling in Angular: A Complete Guide 2025

Introduction

CDK Virtual Scrolling in Angular: As web applications grow in complexity, handling large lists efficiently becomes crucial for performance and user experience. The Angular CDK (Component Dev Kit) provides CDK Virtual Scrolling, a powerful feature that significantly enhances rendering performance by displaying only the visible portion of a list.

In this blog, we will explore:

• What CDK Virtual Scrolling is and why it’s useful.
• Step-by-step implementation in an Angular project.
• Best practices for optimizing performance.
• Advanced use cases with dynamic and real-time data.
• Common issues and solutions.

By the end, you’ll be equipped to integrate virtual scrolling seamlessly into your Angular applications.

What is CDK Virtual Scrolling in Angular?

CDK Virtual Scrolling is a technique that dynamically loads and unloads elements from the DOM based on the user’s scroll position. Instead of rendering thousands of items at once, it efficiently updates only the visible portion, improving performance.

Why Use Virtual Scrolling?

• Optimized Performance: Reduces memory and processing overhead.
• Faster Rendering: Improves page load speed.
• Better User Experience: Prevents browser lag when handling large datasets.

Use Cases

• Large data lists (e.g., chat messages, search results, product catalogs).
• Infinite scrolling implementations.
• Performance optimization in Angular applications.

Prerequisites

Before implementing virtual scrolling, ensure you have:

• Angular CLI: Install it globally using npm install -g @angular/cli. [Angular 9+ installed (recommended for better CDK support).]
• Node.js and npm set up.
• Angular CDK: Install the Angular CDK package in your project.
• Basic knowledge of Angular components and modules.

Step-by-Step Implementation Of CDK Virtual Scrolling in Angular

Step 1: Create a New Angular Project (Optional)

• If you don’t have an Angular project set up, create one using:

ng new virtual-scroll-demo
cd virtual-scroll-demo

Step 2: Install Angular CDK

• Install the Angular CDK package using npm:

npm install @angular/cdk

Step 3: Import ScrollingModule

• Add ScrollingModule to your app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ScrollingModule } from '@angular/cdk/scrolling';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ScrollingModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: Create a Virtual Scroll List

• Modify app.component.html to add the virtual scroll container:

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

Step 5: Populate the Data

• In app.component.ts, define the dataset:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  items = Array.from({ length: 10000 }, (_, i) => `Item #${i + 1}`);
}

Step 5: Apply Basic Styling

• Modify app.component.css to improve appearance:

.scroll-container {
  height: 400px;
  width: 300px;
  border: 1px solid #ccc;
}

.list-item {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

Step 6: Customize Virtual Scrolling

• Set Item Size: Use the itemSize attribute to define the height of each item (e.g., itemSize="50").
• Autosize: If your items have dynamic heights, use the autosize directive to automatically calculate the size.
• Note: If your container height is decreasing then reduce the itemSize.

Also Read: GraphQL vs REST API: A Comprehensive Comparison for 2025

Optimizing Performance

1. Use trackBy

• Enhance rendering efficiency by using trackBy:

<div *cdkVirtualFor="let item of items; trackBy: trackByFn" class="item">
  {{ item }}
</div>

trackByFn(index: number, item: string) {
  return index;
}

2. Adjust bufferSize

• Increase the buffer size to preload items for smoother scrolling:

<cdk-virtual-scroll-viewport itemSize="50" bufferSize="10">

3. Optimize API Calls

• When fetching data from an API, implement pagination to load data dynamically.

Advanced Use Cases

1. Virtual Scrolling with API Data

• Instead of static arrays, fetch data from an API dynamically:

fetchData() {
  this.http.get<any[]>('https://api.example.com/data')
    .subscribe(data => this.items = data);
}

2. Real-Time Data Updates

• Use RxJS Observables to update the list dynamically:

this.dataStream.subscribe(newData => {
  this.items = [...this.items, ...newData];
});

Common Issues & Solutions

1. Virtual Scroll Not Working?

• Ensure ScrollingModule is imported.
• Set a fixed height for the cdk-virtual-scroll-viewport.

2. Performance Lag?

• Use trackBy to optimize change detection.
• Reduce bufferSize if experiencing memory issues.

3. Data Not Loading?

• Debug API calls using console.log(data).
• Verify array population before binding to the template.

Best Practices for Using CDK Virtual Scrolling

1. Use for Large Lists: Virtual scrolling is ideal for lists with thousands of items. For smaller lists, it may add unnecessary complexity.
2. Optimize Item Size: Ensure the itemSize is accurate to avoid rendering issues.
3. Avoid Complex Templates: Keep the template inside the *cdkVirtualFor directive simple to maintain performance.
4. Handle Dynamic Data: Use Angular’s ChangeDetectionStrategy.OnPush to optimize change detection for dynamic data. [CDK Virtual Scrolling in Angular]

Conclusion

CDK Virtual Scrolling is a powerful tool for optimizing Angular applications that deal with large datasets. By rendering only the visible items, it significantly improves performance and enhances the user experience. With this step-by-step guide, you’re now equipped to implement virtual scrolling in your Angular projects.

Try it out in your Angular app and let us know how it works!

Additional Resources

• Angular CDK Official Documentation
• Angular Performance Optimization Tips