GET STARTED

Import

Use the concise public NeuralAutoComplete export from its tree-shakable entry point.

import {
  NeuralAutoComplete,
  NeuralAutoCompleteOptionTemplate,
} from '@neural-ng/core/auto-complete';

@Component({ imports: [NeuralAutoComplete, NeuralAutoCompleteOptionTemplate] })

Local suggestions and nested paths

Map label, value, disabled and group fields without changing source objects. Search can span comma-separated nested paths; Paris is disabled.

Free text mode

valueMode="text" keeps the committed form value synchronized with editable text. Disable force selection to accept values outside the suggestion list.

Remote and race-safe

Remote mode never filters supplied results. Every debounced request carries an increasing id so stale responses can be discarded deterministically.

Angular Forms

The same nullable committed-value model implements Signal Forms, Reactive Forms and template-driven Forms. Programmatic writes do not emit user-only selection events.

Typed content and icon templates

Option, group, empty, loading, dropdown icon and clear icon contexts are all type guarded. The example replaces both action icons while preserving their accessible buttons.

States, labels and Field composition

Disabled, readonly, loading, empty, required, pending and invalid are distinct. Locale messages supply placeholder and action labels unless a component-level override is set.

Semantic events

Models describe state; semantic outputs describe user intent and popup lifecycle. No legacy on-prefixed aliases are needed.

<neural-auto-complete
  [(value)]="value"
  [(query)]="query"
  (search)="searched($event)"
  (selected)="selected($event)"
  (cleared)="cleared($event)"
  (opened)="opened()"
  (closed)="closed()"
  (invalidInput)="invalid($event)"
  (touch)="touched()"
/>

Unstyled and typed class slots

Headless mode keeps structure, top-layer positioning, keyboard behavior, localization and Forms while consumer classes own every visible pixel.

Beta boundaries

Semantics

The input exposes role="combobox", aria-autocomplete="list", expanded, controls, active descendant, busy, readonly and invalid states. Results use listbox, option, selected and disabled semantics.

Keyboard

Arrow Down/Up opens and navigates enabled results, Home/End jump, Enter commits, Escape closes, and Tab preserves the natural focus sequence. The dropdown button is independently keyboard operable.

Focus, touch and IME

DOM focus never moves into options; aria-activedescendant exposes the active result. Blur emits touch and applies force selection. Composition events suppress partial CJK/IME search requests.

Readonly and disabled

Readonly remains enabled, focusable and inspectable but blocks input, selection, clear and blur mutations. Disabled uses the native state and closes an open popup. Disabled options are skipped.

Localization and direction

Placeholder, empty, loading, clear and dropdown messages come from NeuralLocaleService with direct input overrides. Logical popup placement follows RTL automatically; locale-aware filtering can use filterLocale.

Models

Data inputs

Behavior inputs

State, labels and styling inputs

Outputs

Methods

Typed template directives

Typed class slots