GET STARTED

Import

Use the canonical NeuralMultiSelect export from its granular entry point.

import { NeuralMultiSelect, NeuralMultiSelectOptionTemplate } from '@neural-ng/core/multi-select';

@Component({ imports: [NeuralMultiSelect, NeuralMultiSelectOptionTemplate] })

Grouped chips and filtering

Map nested data without mutation, group related results, keep unavailable options visible and customize each row through a typed template.

Display modes and selection limits

comma mode collapses long values into a localized count while selectionLimit protects domain rules. Chip mode remains the default.

Angular Forms

Direct Signals, Signal Forms, Reactive Forms and template-driven Forms share one immutable readonly TValue[] model. Programmatic writes never masquerade as user events.

Remote filtering and request identity

Remote mode never filters the supplied rows. Each debounced query carries a monotonic request id so stale network responses can be ignored deterministically.

Typed composition templates

Header, group, option, selected value, footer, empty and loading surfaces remain typed and independently replaceable.

States and localized feedback

Disabled, readonly, loading, empty and invalid states keep distinct semantics. Empty and loading templates can replace localized defaults.

Virtual scrolling

Fixed-height lists render only the visible overscanned range while preserving full set position metadata. Grouped lists safely fall back to complete rendering.

Semantic events

valueChange owns model synchronization. Selection, removal, clear, select-all, filter and lifecycle events describe user intent with immutable snapshots and no on-prefixed aliases.

<neural-multi-select
  [(value)]="selected"
  (selectionChange)="changed($event)" (selected)="selected($event)"
  (removed)="removed($event)" (cleared)="cleared($event)"
  (selectAllChange)="allChanged($event)" (filterChange)="filtered($event)"
  (opened)="opened()" (closed)="closed()" (touch)="touched()"
/>

Unstyled and typed class slots

Headless mode retains immutable state, Forms, keyboard behavior, ARIA and overlay positioning while Tailwind owns every visible surface.

Combobox and listbox semantics

The trigger and focused filter expose expanded state, controls and active descendant. The popup uses role=listbox with aria-multiselectable=true; every row exposes selection, disabled state, position and total set size.

Keyboard model

Arrow Up/Down move through enabled options, Home/End jump to boundaries, Enter/Space toggle the active option and Escape closes. When filtering is disabled, buffered typeahead moves by localized labels.

Readonly and disabled

Readonly stays focusable and opens for inspection but blocks options, chips, clear and select-all. Disabled leaves the tab sequence and closes an open popup. Required, invalid, pending, touched and dirty states remain inspectable through ARIA and data hooks.

Virtualized accessibility

Only a small window exists in the DOM, but aria-posinset and aria-setsize describe each option inside the complete collection. Active navigation scrolls the target row into view.

Inputs and models

Outputs

Public methods

Typed templates

Typed class slots