tngMultiAutocomplete
The primitive owns three reactive models: open, query, and the selected values array. It also bridges active option state to the owned listbox parts.
Primitive attachment
html
<section
tngMultiAutocomplete
#multi="tngMultiAutocomplete"
[open]="open()"
(openChange)="open.set($event)"
[query]="query()"
(queryChange)="query.set($event)"
[value]="selectedValues()"
(valueChange)="selectedValues.set(toValueArray($event))"
>
@for (value of selectedValues(); track value) {
<span tngMultiAutocompleteChip [tngValue]="value">{{ resolveLabel(value) }}</span>
}
<input tngMultiAutocompleteTrigger type="text" [value]="query()" (input)="onInput($event)" />
<div tngMultiAutocompleteContent class="contents">
<div tngMultiAutocompleteOverlay>
<ul tngMultiAutocompleteListbox [value]="multi.value()">
@for (option of filteredOptions(); track option.id) {
<li tngMultiAutocompleteOption [tngValue]="option.id">{{ option.label }}</li>
}
</ul>
</div>
</div>
</section>| Input / model | Type | Details |
|---|---|---|
open | boolean | Controls whether the overlay is attached and visible. |
query | string | Trigger text used for filtering. This stays separate from the selected values array. |
value | readonly T[] | Selected values in insertion order. |
disabled, loading, invalid | boolean | Optional state hooks reflected on attributes for styling and ARIA. |
openChange, queryChange, valueChange | Outputs | Emit whenever the matching primitive model changes. |
| Methods | add, remove, toggle, removeLast, clear | Imperative helpers exposed on the primitive export. |
Owned parts
MultiAutocomplete stays split into small directives so you can own the shell and the portaled overlay.
Part selectors
txt
[tngMultiAutocomplete]
[tngMultiAutocompleteTrigger]
[tngMultiAutocompleteChip]
[tngMultiAutocompleteContent]
[tngMultiAutocompleteOverlay]
[tngMultiAutocompleteListbox]
[tngMultiAutocompleteOption]| Part | Responsibility |
|---|---|
tngMultiAutocompleteTrigger | Opens the overlay, keeps the query in sync, and handles chip-removal backspace behavior. |
tngMultiAutocompleteChip | Represents a selected value and stays keyboard-focusable for removal flows. |
tngMultiAutocompleteContent + tngMultiAutocompleteOverlay | Own the overlay container and portaled surface. The overlay's scrollStrategy defaults to reposition and also accepts close or block. |
tngMultiAutocompleteListbox + tngMultiAutocompleteOption | Own option navigation, active item state, and commit behavior. |
Models and events
The headless primitive is the right layer when you need to control the live query directly or coordinate chips, input text, and overlay state with other primitives.
queryremains controlled even when the selected values array changes.- Selecting an active option toggles its presence in
value. - Backspace on an empty trigger removes the last selected chip.
Reflected attributes
The primitive reflects state onto slot-based attributes for styling. Keep the focus ring on the host, not the option rows.
| Element | Attributes |
|---|---|
[tngMultiAutocomplete] | data-slot, data-state, data-disabled, data-loading, data-invalid |
[tngMultiAutocompleteChip] | data-slot="multi-autocomplete-chip" |
[tngMultiAutocompleteOption] | data-slot="multi-autocomplete-option", plus active/selected state from the listbox bridge |