Infinite scroll

Loads more content on scroll.

Scroll to the bottom of the list — a new batch loads automatically until the cap is reached.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

import { BuiInfiniteScroll } from 'ng-blatui';

<bui-infinite-scroll [loading]="loading()" [finished]="done()" (more)="loadMore()">
  …items…
</bui-infinite-scroll>

API reference

Inputs

Prop	Type	Default	Description
`loading`	`boolean`	`false`	Whether a load is in progress; shows the spinner and suppresses new emits.
`finished`	`boolean`	`false`	Whether all items are loaded; shows the end message and suppresses emits.
`threshold`	`number`	`200`	Pixel margin below the viewport at which the sentinel triggers loading.

Outputs

Event	Payload	Description
`more`	`void`	Emits when the sentinel scrolls into view or the fallback button is pressed.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.