CngxSelectOption

ComponentOnPushv0.1.0WCAG AA

projects/forms/select/declarative/option.component.ts

Import#

import { CngxSelectOption } from '@cngx/forms/select'

Description#

Declarative-mode option element. Wraps the [cngxOption] atom in a native-feeling <cngx-option> tag with the same [value] / [disabled] / [label] inputs.

Usage: inside a consumer-assembled listbox or as a direct child of <cngx-select-shell> - the shell builds the option list from projected DOM via CNGX_OPTION_CONTAINER, sidestepping the content-projection scoping issue that prevents direct use inside data-mode <cngx-select> (which requires [options]).

<button type="button" [cngxPopoverTrigger]="pop" [cngxListboxTrigger]="lb"
        [popover]="pop" (click)="pop.toggle()">Choose…</button>
<div cngxPopover #pop="cngxPopover" placement="bottom">
  <div cngxListbox #lb="cngxListbox" [label]="'Color'" [(value)]="color">
    <cngx-option [value]="'red'">Red</cngx-option>
    <cngx-option [value]="'green'">Green</cngx-option>
  </div>
</div>

https://cngxjs.github.io/cngx/examples/#/forms/select/declarative/option

Metadata#

Selector: cngx-option
Export as: cngxSelectOption
Change detection: ChangeDetectionStrategy.OnPush
Style URLs: ./option.component.css
Imports: NgTemplateOutlet
Host directives: CngxOption
inputs value disabled label

Providers#

CNGX_AD_ITEM: useExisting CngxOption

Dependencies#

CngxOptioninject()selfoption

Relationships

Depends on2

NgTemplateOutletdependency

CNGX_AD_ITEMservice

Default visuals for the declarative <cngx-option> row inside a projected listbox. Mirrors .cngx-select__option from shared/select-base.css so the declarative option and the data-bound option look identical. Uses the --cngx-select-option-* tokens shared across the family.

State modifiers

[aria-disabled='true'] - opacity 0.5 + cursor: not-allowed
.cngx-option--highlighted - primary-tinted background marking the keyboard-focused row
[hidden] - display: none so filtered-out options remove from layout

Slots

:host - the option row (flex, padded, rounded)
.cngx-option__status - trailing status glyph slot (checkmark, spinner, error), pushed to the inline-end via margin-inline-start: auto

Inheritance

Surface tokens fall back through the select-family base:

--cngx-option-gap -> hardcoded 0.5rem
--cngx-option-status-justify -> hardcoded flex-start
--cngx-select-option-padding -> hardcoded 0.375rem 0.5rem
--cngx-select-option-radius -> hardcoded 0.125rem
--cngx-select-option-highlight-bg -> --cngx-color-primary at 10% alpha