Infinite Scroll with Ionic and Firebase

Introduction

Hi guys, In this post I will show you how you can create a Infinite Scroll using Ionic & Firebase Realtime Database.At first load some sample posts from database.The getSamples() method load 6 sample posts at first using limitToFirst(6).Here, I order the posts by key using orderByKey() and import IonInfiniteScroll to get Infinite Scroll element.

Here I used two variables:

• lastKey - it stores the lastly loaded post key

• isFinished - it stores whether all posts are loaded or not

Before continue, install firebase using below command and setup firebase in your app.

npm i firebase --save

infinite-scroll.page.ts

import * as firebase from "firebase";
import { IonInfiniteScroll } from '@ionic/angular';

infinite-scroll.page.ts

@ViewChild(IonInfiniteScroll, { static: false }) infiniteScroll: IonInfiniteScroll;
  lastKey: string = "";
  samples = [];
  isFinished = false;
  ngOnInit() {
    this.getSamples();
  }
  getSamples() {
    firebase.database().ref("samples").orderByKey().limitToFirst(6)
      .once("value", snap => {
        snap.forEach(child => {
          //store last key
          this.lastKey = child.key;
          //push data sample array
          this.samples.push(child.val());
        })
      })
  }

Setup Infinite Scroll

Lets display loaded posts using ion-item.

infinite-scroll.page.html

<ion-item *ngFor="let sample of samples;let i=index;">
 <ion-label class="ion-text-wrap">
  <h2>{{(i+1))  sample.title}}</h2>
  <p> {{sample.desc}} </p>
 </ion-label>
</ion-item>

Lets setup infinite scroll using ion-infinite-scroll.It has a attribute called threshold (it defines threshold distance from the bottom of the content) and an event called ionInfinite (it is emitted when the scroll reaches the threshold distance).

infinite-scroll.page.html

<ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)"> <ion-infinite-scroll-content> </ion-infinite-scroll-content> </ion-infinite-scroll>

At last,if we loaded all data from firebase database then show 'data ended' content.

infinite-scroll.page.html

<div style="background-color: #f04141;color: #ffffff;" class="ion-padding ion-text-center" *ngIf="isFinished">
 <b>
  End of samples data
 </b>
</div>

Trigger Infinite Scroll

The method loadData() triggers everytime we we reach end of the content.

infinite-scroll.page.ts

loadData(event) {
  firebase.database().ref("samples").orderByKey().startAt(this.lastKey).limitToFirst(3).once("value", snap => {
        event.target.complete();
        if (snap.numChildren() == 1) {
          this.infiniteScroll.disabled = true;
          this.isFinished = true;
        }
        else {
          snap.forEach(child => {
            if (this.lastKey != child.key) {
              this.lastKey = child.key;
              this.samples.push(child.val());
            }
          })
        }
      })
  }

Load data from the last key using startAt(this.lastKey).This method loads last key data also ie.,last key data is loaded twice.So we we check if last key is not equal to current key, if yes then we push data to samples array.

Everytime data is loaded from database , we have to hide infinite scroll spinner by using event.target.complete().If the numChildren() value is 1 that means all data is loaded so set isFinished to true and that show 'data ended content'.