आप ngx-infinite-scroll का उपयोग कर सकते हैं ।
npm install ngx-infinite-scroll --save
डेमो देखें plnkr ।
आपके घटक टेम्पलेट में:
<div class="search-results"
data-infinite-scroll
debounce
[infiniteScrollDistance]="scrollDistance"
[infiniteScrollUpDistance]="scrollUpDistance"
[infiniteScrollThrottle]="throttle"
(scrolled)="onScrollDown()"
(scrolledUp)="onUp()">
<p *ngFor="let i of array">
{{ i }}
</p>
</div>
आपके घटक नियंत्रक में:
onScrollDown (ev) {
console.log('scrolled down!!', ev);
// add another 10 items
const start = this.sum;
this.sum += 10;
this.appendItems(start, this.sum);
this.direction = 'down'
}
onUp(ev) {
console.log('scrolled up!', ev);
const start = this.sum;
this.sum += 10;
this.prependItems(start, this.sum);
this.direction = 'up';
}
यह एक साधारण डेटा सेवा के साथ किया जाता है, लेकिन आप डेटाबेस से डेटा पुनर्प्राप्त करने के लिए एक कस्टम विधि लागू कर सकते हैं। उदाहरण के लिए:
// Page 1
db.comments.find().limit(10)
// Page 2
db.comments.find().skip(10).limit(10)
// Page 3
db.comments.find().skip(10).limit(10)