docs

`tngAutocomplete`

Attach the root directive to a container that owns the trigger, overlay, and listbox parts. The root manages open state, committed value, query state, invalid/loading state, and free-form create behavior.

<section
  tngAutocomplete
  [open]="open()"
  (openChange)="open.set($event)"
  [value]="value()"
  (valueChange)="value.set($event)"
  [query]="query()"
  (queryChange)="query.set($event)"
></section>

Property	Type	Details
`open`	`model<boolean>`	Controls whether the overlay is open.
`value`	`model<T \| null>`	Selected option value.
`query`	`model<string>`	Current input query used for filtering.
`disabled`	`input<boolean>`	Disables trigger focus, typing, and selection.
`allowCreate`	`input<boolean>`	Allows Enter to emit a create event when no option is active.
`strict`	`input<boolean>`	When true, blocks free-form create and requires list selection.
`loading`	`input<boolean>`	Marks the autocomplete as loading and reflects data-loading.
`invalid`	`input<boolean>`	Marks the autocomplete invalid and reflects data-invalid plus aria-invalid on the trigger.
`labelId`	`input<string \| null>`	Used for trigger aria-labelledby when aria-label is not present on the input.
`descriptionId`	`input<string \| null>`	Used for trigger aria-describedby.
`errorId`	`input<string \| null>`	Appended to aria-describedby when invalid.
`openChange`	`output<boolean>`	Emitted when the primitive opens or closes.
`valueChange`	`output<T \| null>`	Emitted when the committed option value changes.
`queryChange`	`output<string>`	Emitted on typing and open-on-focus query sync.
`create`	`output<{ query: string }>`	Emitted on Enter with no active option when create mode is enabled.

Owned parts

The autocomplete interaction model is split into small slot directives. You can omit the optional trigger container or icon, but the trigger, content, overlay, listbox, and option parts should stay aligned with the root primitive.

Slot	Directive	Details
`autocomplete`	`[tngAutocomplete]`	Root state owner. Reflects open, disabled, loading, and invalid state.
`autocomplete-trigger`	`[tngAutocompleteTrigger]`	Combobox input trigger. Owns aria-expanded, aria-controls, and aria-activedescendant wiring.
`autocomplete-trigger-container`	`[tngAutocompleteTriggerContainer]`	Optional wrapper around the trigger and icon. Overlay width/position uses this element when present.
`autocomplete-icon`	`[tngAutocompleteIcon]`	Optional icon slot. Clicking it focuses the trigger.
`autocomplete-content`	`[tngAutocompleteContent]`	Content container that hides when closed.
`autocomplete-overlay`	`[tngAutocompleteOverlay]`	Portaled overlay surface. Moves to document.body while open.
`autocomplete-listbox`	`[tngAutocompleteListbox]`	Listbox bridge that manages active option and selection sync.
`autocomplete-option`	`[tngAutocompleteOption]`	Interactive option. Receives active, selected, and disabled state markers.

Query and create

query is separate from value. The trigger can keep changing the query while the committed value stays the same until the user confirms an option.

Typing updates query and emits queryChange.
Arrow keys move the active option inside the listbox.
Enter commits the active option and emits valueChange.
When allowCreate is true and strict is false, Enter with no active option emits create.

<section
  tngAutocomplete
  [allowCreate]="true"
  [strict]="false"
  (create)="onCreate($event.query)"
>
  ...
</section>

Reflected attributes

Styling should rely on slot markers and state attributes rather than tag names. These reflected markers are the stable contract.

Marker	Where	Details
`data-state`	`[data-slot="autocomplete"]`	open \| closed on the root primitive.
`data-disabled`	`[data-slot="autocomplete"]`	Present when the autocomplete is disabled.
`data-loading`	`[data-slot="autocomplete"]`	Present when loading is true.
`data-invalid`	`[data-slot="autocomplete"]`	Present when invalid is true.
`data-active`	`[data-slot="autocomplete-option"]`	Present on the currently active option.
`data-selected`	`[data-slot="autocomplete-option"]`	Present on the committed option that matches the current value.
`data-disabled`	`[data-slot="autocomplete-option"]`	Present on disabled options.
`data-slot="autocomplete-empty"`	`[data-slot="autocomplete-empty"]`	Reserved empty-state marker for your no-results row.

`tngAutocomplete`

Root primitive attachment

Owned parts

Query and create

Free-form create mode

Reflected attributes