Utilities

Scroll End

Infinite scrolling for a box: asks for the next page near the end, once per page, and stops when everything is loaded.

Part of @tectra-ng/utils (npm install @tectra-ng/utils, also included in tectra-ng).

Features1

API

Theming

Basic

Scroll the list: 10 more rows load near the end, up to 50.

Event #1

Event #2

Event #3

Event #4

Event #5

Event #6

Event #7

Event #8

Event #9

Event #10

10 of 50 loaded

20 lines

<div class="stack wide">  <div    class="list"    tabindex="0"    aria-label="Events"    txScrollEnd    [currentCount]="rows().length"    [maxLimit]="total"    [disabled]="loading()"    (scrolledToBottom)="loadMore()"  >    @for (row of rows(); track row) {      <div class="row">Event #{{ row }}</div>    }    @if (loading()) {      <div class="row loader"><tx-progress-spinner size="small" ariaLabel="Loading" /></div>    }  </div>  <span class="hint">{{ rows().length }} of {{ total }} loaded</span></div>