In web applications, virtual scrolling is used to render and display large lists or grids efficienty. Angular Material, a popular UI component library for Angular, provides built-in support for virtual scrolling. Let’s understand virtual scrolling, it’s benefits, and how to implement it using Angular Material.
What is Virtual Scrolling?
Virtual scrolling renders only the visible items in a list or grid, instead of loading the entire dataset at once. It dynamically creates and removes elements from the DOM as the user scrolls through the list. This approach is useful when dealing with huge data because it significantly improves performance and reduces memory consumption.
Benefits of Virtual Scrolling:
- Improved Performance: Virtual scrolling dramatically enhances the performance of web applications by rendering only the visible items. This results in faster initial loading times and smoother scrolling.
- Reduced Memory Usage: Since only a subset of items is in the DOM at any given time, memory usage reduces significantly, making it feasible to work with large datasets without causing memory-related issues.
- Consistent User Experience: Virtual scrolling provides a consistent user experience, regardless of the data size, as the scrolling remains smooth and responsive.
Implementing Virtual Scrolling in Angular Material:
Angular Material provides a CdkVirtualScrollViewport directive to implement virtual scrolling.
Below are the steps for the same
- Install Angular Material using the below command
ng add @angular/material- In your Angular module import the ScrollingModule:
import { ScrollingModule } from '@angular/cdk/scrolling';
@NgModule({
imports: [ScrollingModule],
})- Create the Virtual Scroll Container:
In your component’s template, create a container element (e.g., <cdk-virtual-scroll-viewport>) to host the virtual scroll:
<cdk-virtual-scroll-viewport itemSize="50" minBufferPx="200" maxBufferPx="400"
class="example-viewport">
<div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>-->- itemSize: This attribute specifies the size of each item in pixels.
- Provide Data:
Just pass the data and Angular Material will handle the rest. As we scroll through the list, virtual scroll will efficiently create and delete elements as needed, providing a seamless user experience.
Now let’s compare the performance with and without virtual scrolling
Considering the example of displaying a list of 20,000 strings.
- With initial scrolling
Code
<h4>Items list with Virtual scrolling enabled</h4>
<cdk-virtual-scroll-viewport itemSize="50" minBufferPx="200" maxBufferPx="400"
class="example-viewport">
<div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport> Performance:
- Displaying plain list without virtual scrolling
Code
<div>
<h2>List of Items</h2>
<ul>
<li *ngFor="let item of items">{{ item }}</li>
</ul>
</div>
Performance:
References
https://material.angular.io/cdk/scrolling/overview
If you like this post and are interested to learn more about MInimal API, please go through below links for other related posts