Q:

Ionic 2 & Firebase Infinite Scrolling

I am having trouble having infinite scroll work in my ionic 2 app with firebase.  
This is my code to get the items from db
this.itemRef = firebase.database().ref('/Terms');

this.itemRef.on('value', itemList => {
  let items = [];
  itemList.forEach( item => {
    items.push(item.val());
    return false;
  });

  this.itemList = items;
  this.loadeditemList = items;

});

This is my html
<ion-content padding class="list">
<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
<ion-list>
<ion-item *ngFor="let item of itemList | orderBy: order" (click)="detailsSelected($event, item)" >
    <h2> {{ item.title }} </h2>
    <p> {{ item.desc }} </p>

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

I just want the ability to load the first ten.. then on scroll load another 10 etc...  the ion-infinite-scroll seems to be what I need, but it doesnt work with my code. 

A:

Your class would look like this (truncated):
class YourCmp {
    limit: number = 10;

    constructor() {
        this.itemRef = firebase.database().ref('/Terms').orderByChild('timestamp'); // or however you mark time
        this.itemRef.limit(this.limit).once('value', itemList => {
          let items = [];
          itemList.forEach( item => {
            items.push(item.val());
            return false;
          });

          this.itemList = items;
          this.loadeditemList = items;

        });
    }

    onInfiniteScroll(event) {
        this.limit += 10; // or however many more you want to load
        this.itemRef.limitToFirst(limit).once('value', itemList => {
          let items = [];
          itemList.forEach( item => {
            items.push(item.val());
            return false;
          });

          this.itemList = items;
          this.loadeditemList = items;

        });
    }

}

And your infinite scroll handler is obviously onInfiniteScroll()

