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: unknown, popover: literal type, trigger: HTMLElement)

Apply the picked page size and close the dropdown. Bound to the listbox's activated output, not valueChange: activation fires on every pick, so re-picking the CURRENT size still closes the panel (with valueChange the unchanged model stays silent and the popover hangs open). Focus returns to the trigger before hide() so the panel is never aria-hidden while it still owns focus.

@paramvalueunknown

@parampopoverliteral type

@paramtriggerHTMLElement