bug:

[albertixcom]

Bug Report

Ionic version:

[x] 4.x

Current behavior: Infinite Scroll not working (not triggering on scroll to bottom)

Expected behavior:

Steps to reproduce: Create new blank project (see enviroment informations below)

> ionic start Ionic4InfiniteScrollDemo blank

home.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Infinite Scroll
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding">

    <ion-list>
      <ion-item *ngFor="let item of items">{{item}}</ion-item>
    </ion-list>

    <ion-infinite-scroll threshold="250px" (ionInfinite)="loadData($event)" [disabled]="numTimesLeft <= 0">
      <ion-infinite-scroll-content
        loadingSpinner="bubbles"
        loadingText="Loading more data...">
      </ion-infinite-scroll-content>
    </ion-infinite-scroll>

  </div>
</ion-content>

home.page.ts

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  items = [];
  numTimesLeft = 5;

  @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;

  constructor() {
    this.addMoreItems();
  }

  loadData(event) {
    setTimeout(() => {
      console.log('Done');
      this.addMoreItems();
      this.numTimesLeft -= 1;
      event.target.complete();
    }, 2000);
  }

  addMoreItems() {
    for (let i=0; i<20; i++)
      this.items.push(i);
  }

}

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 5.2.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.4.0
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : not available
   Cordova Plugins   : not available

Utility:

   cordova-res : 0.2.0 (update available: 0.5.1)
   native-run  : 0.2.0 (update available: 0.2.7)

System:

   Android SDK Tools : 26.1.1 (/Users/albertix/Library/Android/sdk)
   ios-deploy        : 1.9.4
   ios-sim           : 8.0.1
   NodeJS            : v10.15.0 (/usr/local/bin/node)
   npm               : 6.9.0
   OS                : macOS High Sierra
   Xcode             : Xcode 10.2 Build version 10E125

Related code:

package.json

{
  "name": "Ionic4VirtualInfiniteScrollDemo",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^7.2.2",
    "@angular/core": "^7.2.2",
    "@angular/forms": "^7.2.2",
    "@angular/http": "^7.2.2",
    "@angular/platform-browser": "^7.2.2",
    "@angular/platform-browser-dynamic": "^7.2.2",
    "@angular/router": "^7.2.2",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^4.1.0",
    "core-js": "^2.5.4",
    "rxjs": "~6.5.1",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.13.8",
    "@angular-devkit/build-angular": "~0.13.8",
    "@angular-devkit/core": "~7.3.8",
    "@angular-devkit/schematics": "~7.3.8",
    "@angular/cli": "~7.3.8",
    "@angular/compiler": "~7.2.2",
    "@angular/compiler-cli": "~7.2.2",
    "@angular/language-service": "~7.2.2",
    "@ionic/angular-toolkit": "~1.5.1",
    "@types/node": "~12.0.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~8.3.0",
    "tslint": "~5.17.0",
    "typescript": "~3.1.6"
  },
  "description": "An Ionic project"
}

Other notes: I have migrated my application from ionic-3 to ionic-4 and after some weeks hard work, new application is ready. LAST ONE problem is Infinite Scroll and I didn't find any solution of this problem. For tests, I used this tutorial: https://www.freakyjolly.com/ionic-4-add-infinite-scroll-auto-data-loader-component-in-ionic-4-application/ and this example repository: https://github.com/JamiBot/Ionic-4-Infinite-Scroll-Example but, working only with provided "package-lock.json" (witch is different with my autogenerated by project creation)

after command:

npm update

+ @ionic-native/core@5.8.0
+ @ionic-native/splash-screen@5.8.0
+ @ionic-native/status-bar@5.8.0
+ @ionic/angular@4.6.0
+ tslib@1.10.0
+ core-js@2.6.9
+ @types/node@12.0.10

Stop working

Please help me Alb

[bashoogzaad]

IonInfinite event is not called in @ionic/angular 4.6.0 (since the update to Stencil One). This will be fixed in 4.6.1. See #18655

[liamdebeasi]

Thanks for the issue! I am going to close this as a duplicate of https://github.com/ionic-team/ionic/issues/18632. As @bashoogzaad noted, this will be fixed in 4.6.1.

Thanks!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.