Data Handling With Angular 7 And Material : Virtual Scroll And Pagination

PROBLEM STATEMENT

Many times in application development, we are faced with situations wherein we need to present a huge volume of data, be it live feeds or a huge amount of master/transaction data.

As the volume of data is huge, it is imperative that the data be handled in an effective way to present in the DOM to avoid any performance impact on the application.

This voluminous data can be distributed and presented in broadly two ways:

• Pagination: Data split across multiple pages using pagination. Though this is the old style of displaying data, this is relevant in some situations when the user is searching for something in particular within the list of results as it gives better control on the data. It requires an extra click action from the user but it may make sense if the user wants to keep track of the location of the finite results on each page and also get an idea of the total number of results available.
• Scroll: Scroll is the preferred user action to view large lists of data in today’s world of mobile devices and gives better user experience. The complete data is presented to the user in a single view as he scrolls on the screen.

Data in a Scrollable view can be handled and presented in 2 ways:

Infinite scroll loads a small set of data to start with and then keeps appending data into the list as the user scrolls. Spread on the same screen which the user can look through while scrolling across what appears to a seamless expanse of flowing data. This technique may lead to slow down as the DOM element size keeps increasing with all the data getting appended and loaded in the DOM.

Virtual scroll combines the benefit of scrolling by having a small set of data loaded at a time in the viewport and keeps changing the visible set of records as the user scrolls. It keeps the number of DOM elements constant hence maintaining the performance of the application.

In this blog, we will see how we can achieve the above two presentations namely pagination and virtual scroll for huge data sets using Angular 7 + Angular material for best performance.

Read More: https://walkingtree.tech/data-handling-with-angular-7-and-material-virtual-scroll-and-pagination/