CngxOption
projects/common/interactive/listbox/option.directive.ts
Import#
import { CngxOption } from '@cngx/common/interactive'
Description#
A single selectable option registered with a surrounding CngxActiveDescendant.
Click highlights + activates, pointerenter highlights only. Provides a stable
unique id on the host element for aria-activedescendant resolution.
Selection state (isSelected) is driven externally by the enclosing listbox.
In V1 of the stack, CngxListbox reads value() via the AD item list and
exposes its own selection through CngxOption.isSelected().
Metadata#
Host#
Providers#
CNGX_AD_ITEM- useExisting
CngxOption CNGX_OPTION_CONTAINER- useExisting
CngxOption
Relationships
Index#
Properties
Inputs
Derived State
HostBindings
HostListeners
Inputs#
string | undefinedOptional explicit label used by typeahead. Falls back to trimmed textContent.
undefined, { alias: 'label' }Instance Properties#
unknownStable unique id set on the host, used by aria-activedescendant.
nextUid('cngx-option')unknownWhether this option is selected. Driven externally by the enclosing listbox
via markSelected(). Standalone use (without a listbox) always returns false.
this.selectedState.asReadonly()unknownBack-compat callable alias - CngxAdItemHandle.label accepts both
Signal<string> and () => string, so this arrow keeps any
consumer that called option.resolvedLabel() imperatively working
unchanged.
() => {...}Methods#
HostBindings#
| Binding | Expression |
|---|---|
[id] | id |
[class.cngx-option--selected] | isSelected() |
[class.cngx-option--highlighted] | isHighlighted() |
[class.cngx-option--disabled] | disabled() |
[attr.aria-selected] | isSelected() |
[attr.aria-disabled] | disabled() || null |
[attr.data-status] | statusSignal()?.kind ?? null |
[class.cngx-option--hidden] | hidden() |
[attr.hidden] | hidden() || null |
HostListeners#
| Event | Handler |
|---|---|
(click) | click() |
(pointerenter) | pointerenter() |