Skip to main content
cngx-src documentation

CngxPaginateRouting

DirectivePrimaryv0.1.0WCAG AA

projects/common/data/paginate/paginate-routing.directive.ts

Import#

import { CngxPaginateRouting } from '@cngx/common/data'

Description#

Persists a cngxPaginate host's page / size in the URL query string, so a paginated view is deep-linkable and survives reload / back / forward.

Drop it on the same element as cngxPaginate (or a CngxPaginator / CngxMatPaginator, which provide the brain). The page is written 1-based (?page=2) for human-readable URLs; the brain stays 0-based.

<cngx-paginator cngxPaginateRouting [total]="items().length"></cngx-paginator>

Two paginators on one route must take distinct param names via [cngxPaginatePageParam] / [cngxPaginateSizeParam] to avoid a collision.
Requires @angular/router (provideRouter); without it the directive is an inert no-op (a dev-mode warning is logged). Framework-agnostic of any UI - it needs only the brain and the router.

https://cngxjs.github.io/cngx/examples/#/ui/paginator/paginator-behaviors/url-synced-paging

Metadata#

Index#

Inputs#

pageParam#
input()

Query-param name for the 1-based page.

default 'page', { alias: 'cngxPaginatePageParam' }
sizeParam#
input()

Query-param name for the page size.

default 'pageSize', { alias: 'cngxPaginateSizeParam' }

Methods#

ngOnInit#void