CngxInfiniteScroll
projects/common/layout/scroll/infinite-scroll.directive.ts
Import#
import { CngxInfiniteScroll } from '@cngx/common/layout'
Description#
Infinite scroll trigger using IntersectionObserver.
Place on a sentinel element at the bottom of a list. Fires loadMore
when the sentinel enters the viewport. Includes a debounce guard and
a loading input to prevent re-triggers during fetch.
The observer is automatically recreated when root, rootMargin, or
threshold inputs change, and disconnected on destroy or when enabled
is set to false.
Basic infinite list
<div class="item-list">
@for (item of items(); track item.id) {
<app-item [data]="item" />
}
<div cngxInfiniteScroll [loading]="isFetching()" (loadMore)="fetchNext()">
@if (scroll.isLoading()) { <mat-spinner diameter="24" /> }
</div>
</div>Disable when all loaded
<div cngxInfiniteScroll
[enabled]="hasNextPage()"
[loading]="isFetching()"
(loadMore)="fetchNext()">
@if (!hasNextPage()) { <p>All items loaded</p> }
</div>Custom scroll container with pre-fetch margin
<div cngxInfiniteScroll
[root]="'.scroll-container'"
[rootMargin]="'0px 0px 400px 0px'"
[loading]="loading()"
(loadMore)="loadMore()">
</div>Metadata#
Host#
Relationships
Index#
Outputs
Derived State
Inputs#
When false, the observer disconnects entirely. Use to stop loading when all items are fetched.
trueSet to true while fetching. Prevents re-trigger until the fetch completes.
falsestring | nullCSS selector for a custom scroll container root. null uses the viewport.
nullPre-fetch margin. '0px 0px 200px 0px' triggers 200px before the sentinel is visible.
'0px 0px 200px 0px'Outputs#
HostBindings#
| Binding | Expression |
|---|---|
[class.cngx-infinite-scroll--loading] | isLoading() |
[attr.aria-busy] | isLoading() || null |