Ionic:
Ionic CLI : 5.2.0 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.6.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
Utility:
cordova-res : 0.2.0 (update available: 0.5.1)
native-run : 0.2.0 (update available: 0.2.7)
System:
NodeJS : v10.15.0 (/usr/local/bin/node)
npm : 6.9.0
OS : macOS High Sierra
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"
}
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);
}
}
Not working on fresh blank project.
Iāve installed this (exactly the same code)
git clone https://github.com/JamiBot/Ionic-4-Infinite-Scroll-Example.git
And unique difference is āpackage-lock.jsonā file
Any idea to make infinite scroll working ?
UPDATE:
Iāve discovered than official documentation example not working !!!
Tested on Chrome 75.0.3770.100 and Safari 12.1.1
This is IMPORTANT BUG