Ionic 2 InfiniteScroll not working

I am trying to get InfiniteScroll to work for Ionic beta. It does not show up at all at the bottom of the list…What am I doing wrong? Here is my Ionic code…thanks in advance.

package.json

{
  "dependencies": {
    "angular2": "^2.0.0-beta.6",
    "angular2-moment": "^0.3.0",
    "es6-promise": "3.0.2",
    "es6-shim": "0.33.13",
    "firebase": "^2.4.0",
    "ionic-framework": "^2.0.0-beta.0",
    "ionicons": "3.0.0-alpha.3",
    "moment": "^2.11.1",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.14"
  },
  "devDependencies": {
    "awesome-typescript-loader": "^0.15.9",
    "strip-sourcemap-loader": "0.0.1",
    "typescript": "^1.7.5"
  },
  "name": "bogoshogo",
  "description": "BogoShogo: An Ionic project",
  "cordovaPlugins": [
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "ionic-plugin-keyboard",
    "cordova-plugin-camera",
    "cordova-plugin-file",
    "phonegap-plugin-push"
  ],
  "cordovaPlatforms": [
    {
      "platform": "android",
      "locator": "browser"
    },
    "ios"
  ]
}

Ionic Info:
Cordova CLI: 6.0.0
Ionic Version: 2.0.0-beta.1
Ionic CLI Version: 2.0.0-beta.19
Ionic App Lib Version: 2.0.0-beta.9
ios-deploy version: 1.8.5
ios-sim version: 5.0.6
OS: Mac OS X El Capitan
Node Version: v5.5.0
Xcode version: Xcode 7.2.1 Build version 7C1002

constructor(private platform:Platform, private nav:NavController) {
        this.isAndroid = platform.is('android');
        //ion-infinitescroll code
        this.items = [];
        for (var i = 0; i < 30; i++) {
            this.items.push( this.items.length );
        }

    }
doInfinite(infiniteScroll) {
        console.log('Begin async operation');

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

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

**opening are there I am just removing them as they gets rendered in the page.

<ion-content>
ion-infinite-scroll (infinite)="doInfinite($event)">
        <ion-infinite-scroll-content
                loadingSpinner="bubbles"
                loadingText="Loading more data...">
        </ion-infinite-scroll-content>
    /ion-infinite-scroll>
</ion-content>
1 Like

Infinite scroll was only recently added, so you might need to update your project to the latest code.

thanks…I changed the package.json dependency to “ionic-framework”: “2.0.0-beta.3” and updated npm and get this when I run “npm update.” Do I need to update ionic-framework manually?

npm ERR! Darwin 15.3.0
npm ERR! argv “/usr/local/bin/node” “/usr/local/bin/npm” "install"
npm ERR! node v5.5.0
npm ERR! npm v3.8.1

npm ERR! No compatible version found: ionic-framework@2.0.0-beta.3
npm ERR! Valid install targets:
npm ERR! 2.0.0-beta.2, 2.0.0-beta.1, 2.0.0-beta.0,

Its “ionic-angular” now, no more “ionic-framework

add this in package.json

"ionic-angular": "2.0.0-beta.3",

Thanks Maruti. I am able to get the app to run after changing the module name. The infinite scroll shows “Loading more data…” as shown in my cod above. But for some reason, the event doesn’t fire or console does not show “Begin async operation”…is it working on your end?

This worked with 2.0.0-beta.3 but is now broken with 2.0.0-beta.10 . It appears the event in never firing. If you use the example in the docs you will ever see the console.logs

I’m using “ionic-angular”: “2.0.1”, and it seems not to work as well… ahh try chrome, it failed in firefox

I have the same problem.

I use 2.1.0

The event isn’t fired under Windows 10 with firefox, chrome and edge.

it seems the the Event is fired in the ionc view app. The data ar loaded but no spinner is shown.

After updating die Ionic 2,2.0 infinite scroll works in Chrome, Internet Explorer 11 and in the ionic view app.
But not in edge and Firefox.

1 Like

I am experiencing the same issue. It is not working in firefox, but it works in chrome

I have same problem in ionic 2.3.0, thought maybe the problem of threshold.