How to implement ionic infinite scroll to show my array data

Ionic Framework ionic-v3
5

If you want to use infinite scroll , means show all the array data an start from beginning again ? then you need to use
this.items.concat( dataService.Items ); and dont need to use any loop. but if you want to pagination like me, like show 1st 5 data when user scroll down it will show next 5 data. then use slice pipe in your *ngFor
my code

 <ion-card id="list" *ngFor="let d of items | slice:0:slice; let i=index"  text-wrap>
      <ion-card-header>
        {{d.title}}
      </ion-card-header>
      <ion-card-content  [innerHTML]="d.description"></ion-card-content>
    </ion-card>

look the *ngFor="let d of items | slice:0:slice; where i can use *ngFor="let d of items | slice:0:5; like that.
so i just store the 5 inside slice variable and i am increasing the value of this variable by triggering doInfinity() function, like

slice: number = 5;
  doInfinite(infiniteScroll) {
    setTimeout(() => {
      this.slice += 5;
      infiniteScroll.complete();
    }, 200);
    
  }

dont know what is the standard way to solve this. but its work. :stuck_out_tongue:
sorry for my bad English.

4 Likes