GET STARTED

Import

Import the public NeuralSelect class from the granular entry point.

import { NeuralSelect, OptionComponent } from '@neural-ng/core/select';

@Component({ imports: [NeuralSelect, OptionComponent] })

Data options and nested paths

Map labels, values, disabled state and icons without mutating source objects. Property accessors also accept nested paths.

Primitive options

Strings and numbers need no label or value mapping.

Declarative options

neural-option owns rich projected content while its explicit label remains available to typeahead and assistive technology.

Angular Forms

One nullable value contract supports Signal Forms, Reactive Forms and template-driven Forms. Programmatic writes do not emit user-only selection events.

Chained selects

Compute dependent options from the first Signal and reset the child only on semantic user selection.

States

Disabled, readonly, loading, empty and invalid states retain distinct interaction and ARIA contracts.

Append to body

Use the browser top layer inside dialogs, tables and clipped containers. The shared positioner matches trigger width, flips and follows scroll or resize.

Virtual scroll

Large fixed-height lists render only the visible overscanned range while exposing complete set metadata to assistive technology.

Semantic events

valueChange is the model output; selection, clear, panel and touch events describe user intent without invented on-prefixed aliases.

<neural-select
  [(value)]="cityId"
  (valueChange)="valueChanged($event)"
  (selectionChange)="selected($event)"
  (cleared)="cleared($event)"
  (openChange)="panelChanged($event)"
  (touch)="touched()"
/>

Unstyled and typed class slots

Headless mode keeps combobox behavior, top-layer positioning, forms and structural hooks while consumer classes own every visible surface.

Semantics

The native trigger exposes role=combobox, expanded state, controls and active descendant. Options expose selected, disabled, position and set size metadata.

Keyboard

Arrow Up/Down navigate enabled options; Home/End jump; Enter and Space select; Escape closes; Tab preserves natural focus order; printable keys provide buffered typeahead.

Naming and descriptions

Use neural-field for deterministic ids, labels, hints and errors, or provide ariaLabel directly. Loading is announced through aria-busy.

Readonly and disabled

Readonly remains focusable and inspectable but blocks mutation. Disabled uses the native disabled state and leaves the tab order. Disabled options are skipped by all navigation paths.

Inputs

Outputs

Methods

Option API

neural-option requires value and label; it also accepts disabled and iconClass. Do not combine projected options with a non-empty options array.

Typed class slots