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:

1. 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.
2. 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.
3. 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

    import { ScrollingModule } from '@angular/cdk/scrolling';
    @NgModule({
       imports: [ScrollingModule],
    })

<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>-->

<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

https://codingizfun.com/

The post Angular Material Virtual scrolling appeared first on Coding Tutorial.