CngxPaginatorPageSize

ComponentOnPushNo encapsulationv0.1.0WCAG AA

projects/ui/paginator/segments/paginator-page-size.component.ts

Import#

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

Description#

Items-per-page segment. A CngxListbox dropdown (never a native <select>, never the forms select family - keeps @cngx/ui/paginator free of a @cngx/forms dependency). [options] is data, not a feature toggle. Picking a size routes through host.setPageSize, which resets to page 0 (brain semantics). The selected size is derived from host.pageSize(), so the panel selection and the trigger label never drift (Pillar 1).

https://cngxjs.github.io/cngx/examples/#/ui/paginator/paginator-parts/page-size/dropdown

Metadata#

Selector: cngx-pgn-page-size
Export as: cngxPgnPageSize
Change detection: ChangeDetectionStrategy.OnPush
Encapsulation: ViewEncapsulation.None
Imports: CngxListbox CngxListboxTrigger CngxOption CngxPopover CngxPopoverTrigger

Dependencies#

CNGX_PAGINATOR_HOSTinject()host

Relationships

Depends on5

CngxListboxAttribute directive

CngxListboxTriggerAttribute directive

CngxOptionAttribute directive

CngxPopoverAttribute directive

CngxPopoverTriggerAttribute directive

Index#

Inputs#

options#readonly number[]

input()

Selectable page sizes. Pure data - the segment is content-agnostic. Leave unbound (or empty) to fall back to the cascade default (CNGX_PAGINATOR_CONFIG.pageSizeOptions, set app-wide via withPaginatorPageSizeOptions); a non-empty binding wins over it.

default []

Instance Properties#

config#unknown

ProtectedReadonly

injectPaginatorConfig()

glyphs#unknown

ProtectedReadonly

CNGX_PAGINATOR_GLYPHS

Methods#

onSelect#void

Protected

onSelect(value: number | undefined)

@paramvaluenumber | undefined