CngxPaginate
projects/common/data/paginate/paginate.directive.ts
Import#
import { CngxPaginate } from '@cngx/common/data'
Description#
Atom directive that tracks pagination state (current page index and page size).
Supports both uncontrolled (internal state) and controlled modes.
In controlled mode the cngxPageIndex / cngxPageSize inputs take precedence
over internal state - pair with pageChange / pageSizeChange to keep them
in sync.
Consumer connects this to a list or table via range() - nothing is injected
automatically.
// Headless: read range() from a template ref
<div cngxPaginate #pg="cngxPaginate" [total]="items.length">
@for (item of items.slice(pg.range()[0], pg.range()[1]); track item.id) { ... }
</div>
// Drive any UI off the brain - e.g. a Material paginator wired by hand:
<mat-paginator
[length]="pg.total()" [pageIndex]="pg.pageIndex()" [pageSize]="pg.pageSize()"
(page)="pg.setPageSize($event.pageSize, false); pg.setPage($event.pageIndex)" />Metadata#
Index#
Inputs#
number | undefinedControlled page index. When bound, takes precedence over internal state.
undefined, { alias: 'cngxPageIndex' }number | undefinedControlled page size. When bound, takes precedence over internal state.
undefined, { alias: 'cngxPageSize' }Bind an async state - disables navigation while the data source is busy.
When set, isBusy derives from state.isBusy(). Navigation methods
(setPage, next, previous, etc.) are no-ops while busy.