CngxMatPaginator
projects/ui/mat-paginator/mat-paginator-bridge.directive.ts
Import#
import { CngxMatPaginator } from '@cngx/ui/mat-paginator'
Description#
The in-place adoption half of the Material paginator instrumentation: add
cngxMatPaginator to an existing <mat-paginator> and the signal-native
CngxPaginate brain takes over its state with no DOM rewrite, mirroring
[cngxMatStepper] / [cngxMatTabs].
The bridge composes the untouched brain via hostDirectives, injects the
consumer's own MatPaginator with { self: true }, and syncs the four
Material properties (length / pageIndex / pageSize / disabled) plus
pageSizeOptions against the brain's computed() graph, forwarding (page)
back into the brain.
Beyond plain <mat-paginator>, the bridge adds:
[resetOn]- jump to the first page whenever a bound key (a sort / filter / search value) changes, so a filtered result set never strands the user on a now-empty page. Pass a primitive (or acomputedstring key); an inline array literal recomputes every change-detection pass and would reset on each.[announce]- mount a visually-hiddenaria-liveregion that speaks the new page + visible range after every change;<mat-paginator>only relabels its own range text, which AT does not announce. Localise via[announceLabel].[cngxPaginateRouting](generic companion directive from@cngx/common/data)- persist the page / size in the URL query string for deep-linkable, back-button-safe pagination.
<mat-paginator
cngxMatPaginator
#pg="cngxMatPaginator"
[total]="items.length"
[pageSizeOptions]="[5, 10, 25]"
/>
<ul>
@for (item of items.slice(pg.paginate.range()[0], pg.paginate.range()[1]); track item.id) {
<li>{{ item.label }}</li>
}
</ul>Metadata#
Host#
Dependencies#
CngxPaginateinject()paginateThe composed CngxPaginate brain. Public so a sibling list or table
outside the <mat-paginator> reads range() via #ref="cngxMatPaginator".
Index#
HostBindings
Inputs#
Speak page changes through a visually-hidden aria-live region when true.
false, { alias: 'announce' }Builds the announcement string. Defaults to an English template.
defaultAnnounceLabel, { alias: 'announceLabel' }, number[]Options for the page-size selector. A Material-render concern, owned here.
[5, 10, 25]unknownReset key. When its value changes (after the initial render) the brain jumps
to the first page. Bind the sort / filter / search value a result set
depends on. Pass a primitive or a computed - an inline array / object
literal recomputes every change-detection pass and would reset every time.
undefined, { alias: 'resetOn' }HostBindings#
| Binding | Expression |
|---|---|
[attr.aria-busy] | paginate.isBusy() |