CngxPaginatorPageOfPages

ComponentOnPushNo encapsulationv0.1.0WCAG AA

projects/ui/paginator/segments/paginator-page-of-pages.component.ts

Import#

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

Description#

Page-of-pages segment. A CngxListbox dropdown of 1..totalPages; picking page n routes through host.setPage(n - 1). The option list is derived from host.totalPages() and the selected entry from host.pageIndex(), so both track the brain with zero local state (Pillar 1). Like the page-size segment it avoids native <select> and the forms family, keeping the entry @cngx/forms-free.

https://cngxjs.github.io/cngx/examples/#/ui/paginator/paginator-parts/page-of-pages/trigger

Metadata#

Selector: cngx-pgn-page-of-pages
Export as: cngxPgnPageOfPages
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#

Instance Properties#

config#unknown

ProtectedReadonly

injectPaginatorConfig()

glyphs#unknown

ProtectedReadonly

CNGX_PAGINATOR_GLYPHS

Methods#

onSelect#void

Protected

onSelect(value: unknown, popover: literal type, trigger: HTMLElement)

Jump to the picked page and close the dropdown. Bound to the listbox's activated output, not valueChange: activation fires on every pick, so re-picking the CURRENT page 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 (the trigger survives the selection, unlike the overflow gap in CngxPaginatorPages).

@paramvalueunknown

@parampopoverliteral type

@paramtriggerHTMLElement