Backend interview prep

Start

Angular Virtual Scrolling

Learn Angular Virtual Scrolling using Angular CDK with architecture diagrams, performance optimization, Signals integration, trackBy, infinite scrolling, enterprise examples, best practices, and interview questions.

Displaying thousands of records in a browser can quickly degrade application performance.

Imagine rendering:

  • 10,000 Customers
  • 50,000 Transactions
  • 100,000 Products
  • 1 Million Log Records

If Angular renders every item into the DOM, users may experience:

  • Slow page loading
  • High memory consumption
  • Poor scrolling performance
  • Browser freezing
  • Increased CPU utilization

Angular Virtual Scrolling solves this problem by rendering only the visible items while creating the illusion that the entire list exists.

Table of Contents

  • What is Virtual Scrolling?
  • Why Virtual Scrolling?
  • How Virtual Scrolling Works
  • Angular CDK
  • Basic Example
  • Virtual Scrolling vs Normal Rendering
  • trackBy with Virtual Scrolling
  • Signals Integration
  • Infinite Scrolling
  • Enterprise Banking Example
  • Performance Best Practices
  • Common Mistakes
  • Top 10 Interview Questions
  • Summary

What is Virtual Scrolling?

Virtual Scrolling is a rendering technique where Angular only creates DOM elements for items currently visible in the viewport.

As users scroll:

  • Invisible items are removed
  • New visible items are created
  • DOM elements are efficiently reused

Traditional Rendering

flowchart LR

Dataset

Dataset --> Angular

Angular --> Create100000DOM

Create100000DOM --> Browser

Problems

  • Huge DOM
  • Slow rendering
  • High memory usage

Virtual Scrolling

flowchart LR

Dataset

Dataset --> VirtualViewport

VirtualViewport --> VisibleRows

VisibleRows --> Browser

Benefits

  • Small DOM
  • Fast rendering
  • Smooth scrolling

Why Use Virtual Scrolling?

Consider:

100,000 customer records

Traditional rendering creates:

  • 100,000 DOM nodes

Virtual Scrolling may render only:

  • 20–40 DOM nodes

Everything else remains in memory as data, not DOM elements.

Virtual Scrolling Architecture

flowchart TD

LargeDataset

LargeDataset --> VirtualViewport

VirtualViewport --> VisibleItems

VisibleItems --> DOM

UserScroll --> VirtualViewport

Angular CDK

Virtual Scrolling is provided by the Angular Component Dev Kit (CDK).

Install if needed:

npm install @angular/cdk

Import the scrolling module.

import {

ScrollingModule

} from '@angular/cdk/scrolling';

@NgModule({

imports:[

ScrollingModule

]

})
export class AppModule{}

For standalone applications, import ScrollingModule into the component's imports array.

Basic Example

Component

customers = Array.from(

{ length: 100000 },

(_, index) => ({

id: index,

name: `Customer ${index}`

})

);

Template

<cdk-virtual-scroll-viewport

itemSize="50"

class="viewport">

<div

*cdkVirtualFor="let customer of customers">

{{ customer.name }}

</div>

</cdk-virtual-scroll-viewport>

Rendering Flow

sequenceDiagram

participant User

participant Viewport

participant Angular

participant DOM

User->>Viewport: Scroll

Viewport->>Angular: Request Visible Items

Angular->>DOM: Render Visible Rows

itemSize

itemSize represents the height of each row.

<cdk-virtual-scroll-viewport

itemSize="60">

</cdk-virtual-scroll-viewport>

Angular uses this value to calculate:

  • Scroll position
  • Visible items
  • Buffer size

Choose a value that matches the rendered row height.

Virtual Scrolling vs Normal Rendering

Feature Normal List Virtual Scrolling
DOM Size Very Large Small
Performance Slower Faster
Memory Usage High Low
Large Datasets Poor Excellent
Scrolling Can Lag Smooth

Using trackBy

Always combine Virtual Scrolling with trackBy.

<div

*cdkVirtualFor="

let customer of customers;

trackBy: trackByCustomerId">

{{ customer.name }}

</div>

Component

trackByCustomerId(

index:number,

customer:Customer

){

return customer.id;

}

Benefits

  • Better DOM reuse
  • Faster updates
  • Lower rendering cost

trackBy Architecture

flowchart LR

VisibleRows

VisibleRows --> TrackBy

TrackBy --> DOMReuse

DOMReuse --> UI

Signals with Virtual Scrolling

Signals work naturally with Virtual Scrolling.

customers = signal<Customer[]>([]);

Updating one customer

this.customers.update(customers =>

customers.map(customer =>

customer.id === 100

? {

...customer,

name:'Updated Customer'

}

: customer

)

);

Only the affected visible row is refreshed.

Signals Architecture

flowchart TD

Signal

Signal --> VirtualViewport

VirtualViewport --> VisibleRows

VisibleRows --> UI

Infinite Scrolling

Virtual Scrolling and Infinite Scrolling solve different problems.

Virtual Scrolling

  • Optimizes DOM rendering.

Infinite Scrolling

  • Loads more data as users scroll.

They are often combined.

Infinite Scrolling Architecture

flowchart TD

UserScroll

UserScroll --> EndReached

EndReached --> LoadNextPage

LoadNextPage --> API

API --> Dataset

Dataset --> VirtualViewport

Enterprise Banking Example

Transaction History

Records

  • 500,000 Transactions

Technologies

  • Virtual Scrolling
  • Signals
  • trackBy
  • OnPush
  • RxJS
  • Lazy Loading

Architecture

flowchart TD

RESTAPI

RESTAPI --> RxJS

RxJS --> Signal

Signal --> VirtualViewport

VirtualViewport --> TrackBy

TrackBy --> Dashboard

Benefits

  • Fast scrolling
  • Low memory usage
  • High responsiveness
  • Excellent scalability

Performance Comparison

Dataset Normal Rendering Virtual Scrolling
100 Rows Excellent Excellent
1,000 Rows Good Excellent
10,000 Rows Moderate Excellent
100,000 Rows Poor Excellent
Memory Usage High Low
DOM Size Large Small

Performance Best Practices

Practice Benefit
Use Angular CDK Official implementation
Set accurate itemSize Correct scrolling calculations
Combine with trackBy Better DOM reuse
Use Signals for state Fine-grained updates
Use OnPush Efficient Change Detection
Load data in pages Lower memory usage
Combine with RxJS Better async handling
Profile performance Verify improvements

Common Mistakes

Incorrect itemSize

❌ Wrong

itemSize="20"

when rows are actually 60px tall.

Always match the actual rendered height.

Forgetting trackBy

Without trackBy,

Angular performs unnecessary DOM work.

Rendering Complex Templates

Keep each row lightweight.

Avoid:

  • Heavy calculations
  • Expensive pipes
  • Large nested component trees

Loading All Data at Once

Virtual Scrolling optimizes rendering,

not network traffic.

For very large datasets,

combine it with server-side pagination or Infinite Scrolling.

Mutating Objects

Prefer immutable updates.

❌ Wrong

customer.name = 'Updated';

✅ Correct

customer = {

...customer,

name:'Updated'

};

Virtual Scrolling vs Infinite Scrolling

Feature Virtual Scrolling Infinite Scrolling
Optimizes DOM ✅ Yes ❌ No
Loads Additional Data ❌ No ✅ Yes
Memory Usage Lower DOM Memory Depends on Data Size
Best for Large Lists ✅ Yes ✅ Yes
Can Be Combined ✅ Yes ✅ Yes

Advantages

Feature Benefit
Small DOM Faster rendering
Low Memory Usage Better scalability
Smooth Scrolling Better UX
Angular CDK Official support
Signals Compatible Reactive updates
Enterprise Ready Handles massive datasets

Top 10 Virtual Scrolling Interview Questions

1. What is Virtual Scrolling?

Answer

Virtual Scrolling is a rendering technique that creates DOM elements only for items currently visible in the viewport while representing the full dataset through scrolling.

2. Why is Virtual Scrolling important?

Answer

It reduces DOM size, lowers memory usage, improves scrolling performance, and enables Angular applications to handle very large datasets efficiently.

3. Which Angular package provides Virtual Scrolling?

Answer

The Angular Component Dev Kit (CDK), specifically the ScrollingModule.

4. What is itemSize?

Answer

itemSize specifies the height of each rendered item, allowing Angular to calculate scroll positions and determine which items should be displayed.

5. Should trackBy be used with Virtual Scrolling?

Answer

Yes. trackBy helps Angular reuse DOM elements efficiently and minimizes unnecessary rendering.

6. How do Signals work with Virtual Scrolling?

Answer

Signals manage reactive state updates, while Virtual Scrolling ensures that only visible rows affected by those updates are re-rendered.

7. What is the difference between Virtual Scrolling and Infinite Scrolling?

Answer

Virtual Scrolling optimizes DOM rendering by displaying only visible items, whereas Infinite Scrolling loads additional data as users reach the end of the current dataset.

8. Does Virtual Scrolling reduce API requests?

Answer

No. It optimizes rendering, not data retrieval. Combine it with pagination or Infinite Scrolling to reduce network usage.

9. What are common Virtual Scrolling mistakes?

Answer

  • Incorrect itemSize
  • Forgetting trackBy
  • Rendering complex row templates
  • Loading all data at once
  • Mutating objects instead of using immutable updates

Answer

Use Virtual Scrolling with:

  • Angular CDK
  • Signals
  • OnPush Change Detection
  • trackBy
  • RxJS
  • Server-side pagination or Infinite Scrolling

Interview Cheat Sheet

Requirement Recommended Solution
Large Lists Virtual Scrolling
Official Library Angular CDK
Stable DOM trackBy
UI State Signals
Async Data RxJS
Large APIs Pagination
Huge Datasets Virtual Scrolling + Pagination
Change Detection OnPush
Performance Small DOM
Enterprise Apps CDK + Signals + trackBy

Summary

Angular Virtual Scrolling is an essential performance optimization technique for applications that display large datasets. By rendering only the visible items, it dramatically reduces DOM size, memory usage, and rendering time while providing smooth scrolling. When combined with Signals, OnPush Change Detection, trackBy, RxJS, and server-side pagination, Virtual Scrolling enables Angular applications to scale efficiently to hundreds of thousands of records.

Key Takeaways

  • ✔ Virtual Scrolling renders only visible items.
  • ✔ It significantly reduces DOM size and memory usage.
  • ✔ Use Angular CDK's ScrollingModule.
  • ✔ Set an accurate itemSize.
  • ✔ Combine Virtual Scrolling with trackBy.
  • ✔ Use Signals for reactive UI updates.
  • ✔ Combine with OnPush for optimal rendering.
  • ✔ Use pagination or Infinite Scrolling for massive datasets.
  • ✔ Keep row templates lightweight.
  • ✔ Virtual Scrolling is a core Angular performance optimization technique and a common interview topic.

Next Article

➡️ 96-Angular-SSR-QA.md