Ionic Infinite Scroll

The infinite scroll permits you to perform an action when the user scrolls a particular content from the bottom or top of the page. When you display the large collection of data at once, then the infinite scroll is very useful.

You must require a way to display a large amount of data in a mobile application. In that case, the infinite scroll helps to display the content. For example, if you load the various items on the page, then you scroll the content and reach close to the bottom. The expression (ionInfinite) = “loadData($event)” set in the <ion-infinite-scroll> components are called when the user reaches close to the specified distance. When the expression has finished its all tasks, then it should call the complete() method on the infinite scroll instance.

You can use the <ion-infinite-scroll> component to create the infinite scroll in the ionic application. You can understand the ionic infinite scroll more clearly when you scroll the Twitter, Facebook, and Instagram news feed. The current page always loads the new news feeds on that current page, and you will see the loading spinner on the bottom of the view.

Ionic Infinite Scroll Content

The ion-infinite-scroll-content component is the child component of the <ion-infinite-scroll> component. It shows the infinite scroll spinner that looks good based on the platform, and it also changes the display based on the state of infinite scrolls. Infinite scroll provides the properties for scrolling, such as loadingSpinner and loadingText.

Note: The ion-infinite-scroll-content component is not supported in the ReactJS.

Example: This example explains how you can use the infinite scroll component in the ionic application.

Home.page.html

This file calls the event to show the infinite scroll content in the application. The [disabled] = “numTimesLeft <= 0” expression is used to stop the content scrolling. Here, you can also use the loading spinner and loading message, which shows the data when the method is called. You can use the loading spinner and loading text inside the <ion-infinite-scroll-content> component.

<ion-header>  
   <ion-toolbar color="primary">  
     <ion-title>Infinite Scroll Example</ion-title>  
   </ion-toolbar>  
 </ion-header>   
 <ion-content class="ion-padding" color="light">   
  <h1>Infinite Scroll</h1>
   <ion-list>  
     <ion-item *ngFor="let item of items"> {{item}} </ion-item>  
   </ion-list>  
   <ion-infinite-scroll threshold="110px" (ionInfinite)="loadData($event)" [disabled]="numTimesLeft <= 0">  
     <ion-infinite-scroll-content  
       loadingSpinner="circles"  
       loadingText="Loading Data.....">  
     </ion-infinite-scroll-content>  
   </ion-infinite-scroll>   
 </ion-content>   

Home.page.ts

In the Home.page.ts file, you can use the for-loop function to add the dummy items on a loading page. There are two methods used in this file. The loadData() method is called when the item list is reached at the bottom, and the complete() method is called to stop the loader, when the event is completed. Here, you can also set the setTimeout() method for loading the process to display the loading data.

import { Component} from
'@angular/core';  
 @Component({  
   selector: 'app-home',  
   templateUrl: 'home.page.html',  
   styleUrls: ['home.page.scss'],  
 })   
 export class HomePage {  
   items = [];  
   numTimesLeft = 4;  
   constructor() {   
     this.addMoreItems();  
   }  
   loadData(event) {  
     setTimeout(() => {  
       console.log('Done');  
       this.addMoreItems();   
       this.numTimesLeft -= 1;  
       event.target.complete();  
     }, 400);  
   }   
   addMoreItems() {  
     for (let i = 1; i < 12; i++) {  
       this.items.push(i);   
     }  
   }  
 }   

Output: After executing this code, you will get the output, as shown below:

When you reached the bottom of the page, then it starts loading process, and it displays more data at the page when you scroll. The output shows below: