CngxAccordion
projects/common/interactive/accordion/accordion.directive.ts
Import#
import { CngxAccordion } from '@cngx/common/interactive'
Description#
Coordinating directive for an accordion. Put cngxAccordion on the
container; each header carries CngxAccordionPanel. The container owns
two single sources of truth - one openIds set signal (expansion) and one
header registry (rovingActiveId) - and arbitrates single- vs multi-open. No
panel owns mutable expansion state and no effect syncs siblings: every
panel's aria-expanded derives from the open-set signal (Pillar 1).
Header arrow-key navigation runs through createAccordionKeyboardNav
over a header registry rather than contentChildren roving. Panels register
their header handle on init, so navigation survives a skin that renders each
header inside its own component view - the reason CngxAccordionPanel
self-wires tabindex/keydown instead of relying on a container-level
roving directive.
<div cngxAccordion #acc="cngxAccordion" [multi]="false">
<button cngxAccordionPanel id="head-a" panelId="a" controls="region-a">Section A</button>
<div role="region" id="region-a" aria-labelledby="head-a" [hidden]="!acc.isOpen('a')">…</div>
<button cngxAccordionPanel id="head-b" panelId="b" controls="region-b">Section B</button>
<div role="region" id="region-b" aria-labelledby="head-b" [hidden]="!acc.isOpen('b')">…</div>
</div>Metadata#
Providers#
CNGX_ACCORDION- useExisting
CngxAccordion
Relationships
Depends on1
Index#
Outputs
Derived State
Inputs#
ReadonlySetControlled set of open panel ids - the accordion's primary value, exposed
as a model so a consumer can seed initially-open panels or drive
expansion declaratively (router / SSR). model() takes no equal, so the
equality discipline lives on effectiveOpenIds below - the derived
set every panel reads. toggle() is the only writer on interaction; the
consumer may also write it. No effect syncs it (Pillar 1).
new Set()Outputs#
ReadonlySetControlled set of open panel ids - the accordion's primary value, exposed
as a model so a consumer can seed initially-open panels or drive
expansion declaratively (router / SSR). model() takes no equal, so the
equality discipline lives on effectiveOpenIds below - the derived
set every panel reads. toggle() is the only writer on interaction; the
consumer may also write it. No effect syncs it (Pillar 1).
Instance Properties#
Methods#
registerHeader(handle: CngxAccordionHeaderHandle)unregisterHeader(handle: CngxAccordionHeaderHandle)