I have incorporated the angular2-infinite-scroll plugin, specifically version 0.1.4.
You can view my plunker here.
Currently, the function onScrollDown() only runs once at the beginning when scrolling.
I attempted to adjust the values for infiniteScrollDistance to both 2 and 0.8, but without success.
How can I ensure that onScrollDown() triggers only when nearing the bottom of the page?
@Component({
selector: 'my-app',
directives: [InfiniteScroll],
styles: [`
.search-results {
height: 20rem;
overflow: scroll;
}
`],
template: `
<div class="search-results"
infinite-scroll
[infiniteScrollDistance]="0.8"
[immediateCheck]="true"
(scrolled)="onScrollDown()">
<p *ngFor="let i of array">
{{i}}
</p>
</div>
`
})
export class App {
array = [];
sum = 20;
constructor() {
for (let i = 0; i < this.sum; ++i) {
this.array.push(i);
}
}
onScrollDown () {
console.log('near the bottom!!');
// add another 20 items
const start = this.sum;
this.sum += 20;
for (let i = start; i < this.sum; ++i) {
this.array.push(i);
}
}
}