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

PREREQUISITES

Install the latest version of Angular CLI, with its new set of capabilities and prompts.

If you have an existing older version, you can update using

GETTING STARTED

Let’s first start with creating a new Angular 7 application.

With Angular devkit6+, you can use the ng add the command to add the other dependencies:

Now, we create the components for the demo using the CLI shortcuts:

SETTING DATA FOR DISPLAY

Set up a MatDemoService, service to return the periodic table elements json data which will be used to display in this example.

Courtesy: https://github.com/Bowserinator/Periodic-Table-JSON/blob/master/PeriodicTableJSON.json

PAGINATION OF DATA CARDS

Importing required modules

Import the required material modules which will be needed to display the data in a presentable format and include in your app.module.ts imports.

MatPaginatorModule is required to include the material paginator.

Defining the Data card component.

Define the demoCard component which will be used to display the data.

The only addition in the demo-card.component.ts is the inclusion of the Input element.

Now the DemoCardComponent is ready and can be used to display the data in card format.

Using Angular Material Paginator – mat-paginator

Now we will work on the MatPaginationDemoComponent to handle the paginated view.

The HTML logic (mat-pagination-demo.component.html) will include the app-demo-card component to display the element obtained from the datasource using ngFor. The mat-paginator component is added to handle the pagination.

In order to display the data card in a paginated fashion and set up the datasource for the display, we will import the following in (mat-pagination-demo.component.ts)

The following properties to be declared to handle pagination properties and datasource:

In order to set up the DataSource, we will define the asynchronous data for that to be set up as BehaviourSubject. This can be used to dynamically get data from custom datasource. In the current example, we will try to replicate the custom data flow by emitting the same data in the constructor.

The DataSource will be defined using the above database, which returns the stream of data as an Observable and the paginator reference(using ViewChild) which was added in the view.

A DataSource is an abstract class(extends DataSource) that has two methods: connect and disconnect. The connect method will be called to receive a stream that emits the data array that should be rendered. The disconnect is called when the viewport is destroyed to clean up any subscriptions that were registered during the connect process.

Finally, the data will be initialized in the ngOnInit function to instantiate the datasource which will provide the data and link it to the paginator.

Using above we can get the Paginator for the custom datasource.

VIRTUAL SCROLL

Using Virtual Scroll – Scrolling Module:

Import the ScrollingModule to implement virtual scroll in app.module.ts.

The VirtualScrollDemoComponent view will comprise of cdk-virtual-scroll-viewport, which takes care of loading only the data which fits the screen.

*cdkVirtualFor is similar to *ngFor directive to which we provide the data to be displayed. *cdkVirtualFor accepts data in the form of an Array, Observable<Array>, or a custom DataSource. The DataSource for the virtual scroll is similar to the one used in the pagination example and used in other table and tree material components. Here we will use a simple data array.

In this example, we use a simple array obtained from service as below:

If you explore the elements being rendered in the inspect DOM section, you will see that the number of DOM elements remain fixed, only the content keeps changing as we scroll in the application.

You can find the complete code here – https://github.com/abhilashahyd/ang-mat-appl

( A sidenav and toolbar is added to the app.component to view the 2 components for Pagination and Virtual Scroll )

SUMMARY

In this blog, we saw how we can implement pagination and virtual scroll using Angular Material. The choice between pagination and scrolling would depend on the context of your application design and how the content needs to be delivered and accessed to achieve the best balance between user experience and application performance.

References:

https://material.angular.io/

https://github.com/angular/material2/issues/6036