ionic infinite scroll

1<ion-content>
2  <ion-button (click)="toggleInfiniteScroll()" expand="block">
3    Toggle Infinite Scroll
4  </ion-button>
5
6  <ion-list></ion-list>
7
8  <ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
9    <ion-infinite-scroll-content
10      loadingSpinner="bubbles"
11      loadingText="Loading more data...">
12    </ion-infinite-scroll-content>
13  </ion-infinite-scroll>
14</ion-content>
15
16import { Component, ViewChild } from '@angular/core';
17import { IonInfiniteScroll } from '@ionic/angular';
18
19@Component({
20  selector: 'infinite-scroll-example',
21  templateUrl: 'infinite-scroll-example.html',
22  styleUrls: ['./infinite-scroll-example.css']
23})
24export class InfiniteScrollExample {
25  @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
26
27  constructor() {}
28
29  loadData(event) {
30    setTimeout(() => {
31      console.log('Done');
32      event.target.complete();
33
34      // App logic to determine if all data is loaded
35      // and disable the infinite scroll
36      if (data.length == 1000) {
37        event.target.disabled = true;
38      }
39    }, 500);
40  }
41
42  toggleInfiniteScroll() {
43    this.infiniteScroll.disabled = !this.infiniteScroll.disabled;
44  }
45}