How to use Virtual Scroll in Angular to boost the website performance

Angular + Virtual Scroll

Performance of the website is a vital part of the development lifecycle. Nowadays, the user needs a website to respond quickly and they are going to leave the website if they have to wait for even 3-5 seconds.

Well, if the website has too much data then it will be foremost that when we show everything, the performance of the website will degrade. As it’s obvious that if the website has huge data then DOM elements are also going to be huge and it will degrade the performance of the website. If a webpage is long then the browser will also create DOM elements which are not visible to a user and appear when they scroll down resulting in bad user experience. So what can we do about this? what if we generate only DOM elements that are visible to the user?

We can do it with lazy loading and it is a good option for the performance optimization but it requires more development efforts. So what if we only implement lazy loading kind of behaviour in frontend itself so it will also reduce the API calls to fetch the data. We can do that in the frontEnd without implementation of lazy loading using virtual scroll.

Virtual Scroll will only generate DOM elements which are visible to users. When the user scrolls upwards or backwards, it will automatically add and destroy the elements resulting in creating only DOM elements which are visible to the user. This will improve the websites performance by 80 to 90% for sure.

Tutorial

Below is the one Realtime example which gives you step by step guidance about how Virtual scroll works and how to implement it in an Angular application.

ReactJS and VueJS also has node packages to build the infinite scroll.

We assume that you have already initiated the Angular project.

Step 1: Install ngx-virtual-scroller

npm install ngx-virtual-scroller

Step 2: Import virtual scroll module into your app module

import { VirtualScrollerModule } from ‘ngx-virtual-scroller’;

Step 3: Create the parent component and service component.

ng generate component virtual-table
ng generate service virtual-list

virtual-table.component.ts

This is parent component in which we are passing list data to child component using @input

virtual-list.service.ts

virtual-list services will provide data to parent component and parent will pass to the child component

Step 4: Create child component call virtual-list as below

ng generate component virtual-list

The above command will generate the following two files.

virtual-list.component.ts

virtual-list.component.html

We can use this child component in any component in which we want to show data in tabular form and all we need to make it work, is provide the data. For example, you can see virtual-table.component.ts where we have passed tableList in items attribute.

Conclusion

And that’s it! Did this work for you? Please leave any questions and comments below!

Thank you for reading and If you found this article helpful, clap! 👏👏👏.