Infinite List overview

NbInfiniteListDirective

Infinite List Directive

 <nb-list nbInfiniteList [threshold]="500" (bottomThreshold)="loadNext()">
   <nb-list-item *ngFor="let item of items"></nb-list-item>
 </nb-list>

Directive will notify when list scrolled up or down to a given threshold. By default it listen to scroll of list on which applied, but also can be set to listen to window scroll.

To improve UX of infinite lists, it's better to keep current page in url, so user able to return to the last viewed page or to share a link to this page. nbListPageTracker directive will help you to know, what page user currently viewing. Just put it on a list, set page size and it will calculate page that currently in viewport. You can open the example in a new tab to check out this feature.

NbListPageTrackerDirective

List pager directive

Directive allows you to determine page of currently viewing items.