ionic 4 - loading spinner not working in infinite scroll

Question

the loading spinner is not showing at the bottom of the infinite scroll even after i have added the loadingSpinner line into the code

<ion-infinite-scroll (ionInfinite)="getProducts($event)">
  <ion-infinite-scroll-content loadingSpinner="bubbles"></ion-infinite-scroll-content>
</ion-infinite-scroll>

Answer 1

I haven't checked your code but I am sure this occured because in Ionic4 there is a change in the kind of events that are emitted. In Ionic v3 we were emitting synthetic Angular events, but in V4 we've emitted HTML events, meaning you need to access the complete method from the event target. The correct way to handle this now is with $event.target.methodName()

Solution -

 doInfinite(infiniteScroll) {

    setTimeout(() => {
      for (let i = 0; i < 30; i++) {
        this.items.push(this.items.length);
      }

      infiniteScroll.target.complete(); // this is how you need to call in v4
    }, 500);
  }

Here is solution on stackblitz

Hope this will help!