In this tutorial, you will learn, how to implement the Infinite Scroll functionality in the mobile application using the Ionic 2 Framework.

The Infinite Scroll allows you to perform an action when the user scrolls a specified distance from the bottom or top of the page.

The Infinite Scroll is a tag and the example code is below.

<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>

From the above sample code, when the user reaches the bottom, the doInfinite function will be called.

Browser Preview of Basic Infinite Scroll Example(Android, iOS, and Windows).

Create a new Ionic 2 project using the below command.

ionic start app blank --v2

Place the below code in the home.html file.

<ion-list>
<ion-item *ngFor="let i of items">{{i}}</ion-item>
</ion-list>

<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>

The doInfinite function will be called when the user scrolls to the bottom of the home page. The doInfinite function had a loop, which will run for 30 times and the output will be stored in the items array variable. The items array is iterated using the ngFor and displays the result as ion-item.

So create a items variable in the home.ts file.

items = [];

Add some values to this array using the constructor.

constructor() {
for (let i = 0; i < 30; i++) {
this.items.push( this.items.length );
}
}

Now implement the doInfinite function like below.

doInfinite(infiniteScroll) {
console.log('Begin async operation');

setTimeout(() => {
for (let i = 0; i < 30; i++) {
this.items.push( this.items.length );
}

console.log('Async operation has ended');
infiniteScroll.complete();
}, 500);
}

Infinite Scroll Content.

By default, Ionic uses the infinite scroll spinner that looks best for the platform the user is on. However, you can change the default spinner or add text by adding properties to the ion-infinite-scroll-content component

<ion-content>

<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>

</ion-content>


Below is the Ionic 2 information while writing this post.

Cordova CLI: 6.5.0 
Ionic Framework Version: 3.6.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 2.1.3
ios-deploy version: Not installed
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v6.10.0
Xcode version: Xcode 8.2.1