Ionic Component - Infinite Scroll

by Ben Clayton

HTML

 <link href="https://unpkg.com/@ionic/[email protected]/css/ionic.bundle.css" rel="stylesheet" />
        <script src="https://unpkg.com/@ionic/[email protected]/dist/ionic.js"></script>
				
				<script src="https://unpkg.com/@ionic/[email protected]/dist/ionic/ionic.jalvwqim.js" type="module" crossorigin="true" data-resources-url="https://unpkg.com/@ionic/[email protected]/dist/ionic/" data-namespace="ionic"></script>
				

No idea where this gets data from ???
<ion-content>
  <ion-button (click)="toggleInfiniteScroll()" expand="block">
    Toggle Infinite Scroll
  </ion-button>

  <ion-list></ion-list>

  <ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

TypeScript

//  docs:  https://beta.ionicframework.com/docs/api/infinite-scroll/


import { Component, ViewChild } from '@angular/core';
import { InfiniteScroll } from '@ionic/angular';

@Component({
  selector: 'infinite-scroll-example',
  templateUrl: 'infinite-scroll-example.html',
  styleUrls: ['./infinite-scroll-example.css']
})
export class InfiniteScrollExample {
  @ViewChild(InfiniteScroll) infiniteScroll: InfiniteScroll;

  constructor() {}

  loadData(event) {
    setTimeout(() => {
      console.log('Done');
      event.target.complete();

      // App logic to determine if all data is loaded
      // and disable the infinite scroll
      if (data.length == 1000) {
        event.target.disabled = true;
      }
    }, 500);
  }

  toggleInfiniteScroll() {
    infiniteScroll.disabled = !infiniteScroll.disabled;
  }
}