<ion-content padding-horizontal padding #content class="page-list-content">
<ion-infinite-scroll *ngIf="!isPagingComplete" (ionInfinite)="doInfinite($event)" position="bottom">
  <ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
<ion-list>
  <ion-item-sliding *ngFor="let entity of entityList" #item>
    <ion-item (click)="config.onItemClick(entity)" >
      <template [ngTemplateOutlet]="template" [ngOutletContext]="{entity: entity}"></template>
    </ion-item>
    <ion-item-options side="right">
      <button ion-button color="danger"  *ngIf="config && config.canDelete" (click)="delete(entity.id)">
        <ion-icon name="trash"></ion-icon>Delete
      </button>
      <button ion-button color="dark" >
        <ion-icon name="more"></ion-icon>More
      </button>
    </ion-item-options>
  </ion-item-sliding>
  <ion-list-header>
    <button *ngIf="config && config.canCreate" (click)="create()"
            ion-button full color="secondary">
      Create New<ion-icon name="add"></ion-icon>
    </button>
  </ion-list-header>
</ion-list>
</ion-content>

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

    setTimeout(() => {

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

getPaginatedList(infiniteScroll) {

    if (this.isPagingComplete) {
        infiniteScroll.complete();
        return;
    }

    this.getNextPage(infiniteScroll);
}

getPage(pageNumber: number = 1)
{
    this.pageNumber = pageNumber
    this.getNextPage();
}

getNextPage(infiniteScroll?: any)
{
    if(!this.isPagingEnabled || this.isPagingComplete)
    {
        return;
    }

    this.isPagingEnabled = false;
    this.getList(this.pageSize, this.pageNumber).subscribe(entities => {
            //Clear the list if this is the first page loaded
            //Clear the page in the subscribe to have double buffering effect
            if(this.pageNumber == 1)
            {
                this.entityList = [];
            }

            this.entityList = this.entityList.concat(entities);

            this.pageNumber++;
            if(this.pageSize > entities.length)
            {
                this.isPagingComplete = true;
            }
        }, () => {},
        () => {
            this.isPagingEnabled = true;
            if (infiniteScroll) {
                infiniteScroll.complete();
            }
        });
}