Ion-Spinner not showing on Infinite-Scroll when using ng-if

Question

Good day everyone,

The issue is this:

when I put a condition for Infinite-Scroll the spinner and the text that shows loading ... is not showing. When I remove the condition, everything works perfectly. The issue also, that is the condition is needed as when all posts have retrieved no need to call the endpoint for nothing.

this is not working

      <ion-infinite-scroll (ionInfinite)="loadMore($event)" *ngIf="page < totalPage">
      <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="تحميل المزيد من الأخبار..."></ion-infinite-scroll-content>
  </ion-infinite-scroll>

this is working

  <ion-infinite-scroll (ionInfinite)="loadMore($event)">
      <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="تحميل المزيد من الأخبار..."></ion-infinite-scroll-content>
  </ion-infinite-scroll>

Answer 1

  doInfinite(infiniteScroll) {
     // this.page = this.page+1; // Remove this line because is hidding the spinner before api request is completed.
      setTimeout(() => {
        this.restApi.getUsers(this.page + 1) // Call api without changing the page yet
           .subscribe(
             res => {
               this.data = res; 
               this.page = this.page+1; // Add this line to hide spinner after api request is completed 
               this.perPage = this.data.per_page;
               this.totalData = this.data.total;
               this.totalPage = this.data.total_pages;
               for(let i=0; i<this.data.data.length; i++) {
                 this.users.push(this.data.data[i]);
               }
             },
             error =>  this.errorMessage = <any>error);

        console.log('Async operation has ended');
        infiniteScroll.complete();
      }, 1000);
    }