Skip to main content
cngx-src documentation

CngxPaginatorInfinite

ComponentOnPushNo encapsulationv0.1.0WCAG AA

projects/ui/paginator/segments/paginator-infinite.component.ts

Import#

import { CngxPaginatorInfinite } from '@cngx/ui/paginator'

Description#

Infinite-scroll segment: a bottom-of-list sentinel that auto-advances the page as it scrolls into view, composing CngxInfiniteScroll.
The in-template sentinel binds the directive's [enabled] / [loading] inputs and its (loadMore) output directly to the CNGX_PAGINATOR_HOST signals, so the directive's built-in debounce, busy-gate, enabled-disable, and auto-disconnect own the auto-advance double-fire guard - this segment adds no IntersectionObserver code of its own.

The directive sits on the sentinel element (not as a hostDirective) precisely so its [enabled] / [loading] inputs can bind to the host-token signals; a static hostDirectives declaration could not express that wiring.

Like cngx-pgn-load-more, this stays a thin trigger atom: it injects CNGX_PAGINATOR_HOST, holds no accumulation state, and renders no async view of its own.
The consumer slices its own array from the brain's cumulativeRange(); the busy / error / end experience belongs to the consumer or to a composing container, keeping the segment reusable unchanged.

Exhausted state: once host.isLast() the sentinel disables (enabled is false, so the observer disconnects).
It swaps its busy affordance for the allLoaded end label only after the final load settles (!host.isBusy()), so it never claims "all loaded" while the last batch is still arriving, and the tail is never a silent or stale spinner.

[root] / [rootMargin] forward straight to the composed directive so a consumer can point the sentinel at a bounded scroll container (a feed box) rather than the viewport, and tune the pre-fetch distance. They are plain passthrough config - the segment still owns no observer code and no state.

https://cngxjs.github.io/cngx/examples/#/ui/paginator/paginator-parts/infinite/sentinel https://cngxjs.github.io/cngx/examples/#/ui/paginator/paginator-modes/infinite

Metadata#

Dependencies#

CNGX_PAGINATOR_HOSTinject()host

Relationships

Index#

Inputs#

root#string | null
input()

CSS selector for the scroll container the sentinel is watched within. null (default) observes the viewport. Forwarded to CngxInfiniteScroll.

default null
rootMargin#string
input()

Pre-fetch margin around the scroll container, forwarded to CngxInfiniteScroll. The directive default loads ~200px before the sentinel is visible.

default '0px 0px 200px 0px'