Ionic 4 | Implement Infinite Scroll List with Virtual Scroll List in Ionic 4 Application

Ionic Framework provides two very powerful methods to load a large number of list items in mobile application very efficiently. First is Infinite Scroll list container which we have already discussed and the other one is Virtual Scroll list component.

Infinite Scroll list is related loading of list items in form of chunks when user scroll list items and reaches the bottom then a new set of items are loaded and added to the existing list. This makes listing very easy to manage and display and doesn’t dump at once. You can check this post on Infinite Scroll list.

In this article, we will discuss Virtual Scroll list. Ionic’s virtual list is similar to Angular Material’s  Virtual Infinite Scroll list.

Virtual Scroll lists are used to optimize performance where only a small subset of actual records are rendered in HTML which seems to be an Infinite list. The virtual scroll is used where a number of records are really huge and can cause performance issues.

Here we will Implement Infinite Scroll lists with Virtual Scroll, the combination of these two can greatly improve the performance and provide an easy user experience in parallel.

Let’s get started!

Create a new Ionic 4 Application

Make sure you have the latest version of IOnic CLI installed which is 4.10.2 at time of this article

Create Ionic 4 app using below command

 

Add Virtual Scroll & Infinite Scroll Component in Home Page

In home.page.html file replace following HTML code

ion-virtual-scroll takes dataSet in [items] attribute

ion-infinite-scroll directive keeps track when the user reached the bottom, it calls a method defined in even handler ionInfinite 

ion-infinite-scroll-content directive can be used to customize the loader or text which shows up when a method is called and data loading is in process

 

Then in home.page.ts file replace following code with methods which we are calling from Infinite web component.

Here we have for loop to add dummy data on page load and loadData method call in dataList of type any. When list reached bottom loadData method is called, in a real application, this can be an HTTP call on success or error of which we need to call  event.target.complete(); which will stop loader.  event.target.disabled can be set to true or false to enable or disable infinite scroll functionality.

To render the updated list in Virtual Scroll we need to call  this.virtualScroll.checkEnd();  method in loadData method below.

 

By using the above simple method we can Inifite scroll list to load large list items in chunks making application usability very easy and more convenient. See more details on Ionic 4 Virtual Scroll list with Infinite Scroll list here.

Leave a Reply

Your email address will not be published. Required fields are marked *