Ionic 4 | Add Infinite Scroll / Auto Data Loader Component in Ionic 4 Application

In Web Applications where we have a large number of items to show, traditionally we use page number where a user can move to a page showing a specific number of records like 15 or 25 per page. We use pagination to make data viewing easier to see as we can’t show all data set having a large number of list items at once, which may result in an issue with page performance and users may find it difficult get required information.

The mobile application may need a more interactive way to show large list items with a lesser number of clicks, we can show list items using Infinite scroll or Lazy Loading data as user scrolls to bottom. This works like first we load 20 items in page after the user scrolls those items and reaches close to bottom me make a new data request and get next set of 20 or any required number of records items which get added to existing items. This process goes on repeating and data is loaded in chunks as user scrolls.

In this article, we will implement the Infinite Scroll component In Ionic 4 Application. Here we will also add a toggle button to enable and disable infinite scroll functionality.

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 Infinite Scroll Component in Home Page

In home.page.html file replace following HTML code

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.

 

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 Infinite Scroll list here.

 

Leave a Reply

avatar
  Subscribe  
Notify of