CngxSelectOptgroup

ComponentOnPushv0.1.0WCAG AA

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

Import#

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

Description#

Declarative-mode group element. Renders a non-focusable header and projects <cngx-option> children under WAI-ARIA role="group".

Usage: inside a consumer-assembled listbox or as a direct child of <cngx-select-shell>. Not supported inside data-mode <cngx-select> (consumes via [options]).

<div cngxListbox #lb="cngxListbox" [label]="'Color'" [(value)]="color">
  <cngx-optgroup label="Warm">
    <cngx-option [value]="'red'">Red</cngx-option>
    <cngx-option [value]="'orange'">Orange</cngx-option>
  </cngx-optgroup>

  <cngx-select-divider />

  <cngx-optgroup label="Cold">
    <cngx-option [value]="'blue'">Blue</cngx-option>
  </cngx-optgroup>
</div>

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

Metadata#

Selector: cngx-optgroup
Export as: cngxSelectOptgroup
Change detection: ChangeDetectionStrategy.OnPush
Style URLs: ./optgroup.component.css
Host directives: CngxOptionGroup
inputs label

Index#

Inputs

label

Inputs#

label#string

input()Required

Header text. Mirrors the hostDirective input for template binding.

Default visuals for the declarative <cngx-optgroup> - a wrapper that renders a group header above projected options. The header class mirrors .cngx-select__group-header from shared/select-base.css 1:1 so a declarative group reads identically to a data-mode group.

Slots

:host - block-level wrapper, no chrome of its own
.cngx-select__group-header - uppercase, condensed-tracking label (padding 0.25rem 0.5rem, font-size: 0.75rem, font-weight: 600, opacity: 0.7, letter-spacing: 0.04em)

Inheritance

No tunable tokens - the header is intentionally pinned to the same static values as .cngx-select__group-header in select-base.css so declarative and data-mode groups stay visually locked. Override the base rule to restyle both together.