@theredhead — Frontend Library - v1.0.0
    Preparing search index...

    Class UIAutocomplete<T>

    Autocomplete / type-ahead component with optional custom item template.

    Renders a text input that, on every keystroke, queries the supplied AutocompleteDatasource and shows a popup list of matching items.

    Consumers project an <ng-template let-item> to control how each suggestion is rendered. When no template is provided the component falls back to String(item).

    Selection is exposed as a two-way [(value)] binding carrying the currently selected items.

    Zero external dependencies — only Angular core + @angular/common.

    <ui-autocomplete [datasource]="ds" [(value)]="picked">
      <ng-template let-item>
        <strong>{{ item.name }}</strong>
        <small>{{ item.email }}</small>
      </ng-template>
    </ui-autocomplete>

    Type Parameters

    • T
    Index

    Constructors

    constructor

    Properties

    activeIndex ariaLabel datasource disabled displayWith isOpen itemRemoved itemSelected itemTemplate listboxId minChars multiple placeholder query suggestions trackBy value

    Constructors

    Properties

    activeIndex: WritableSignal<number> = ...

    Keyboard-highlighted index inside the suggestions list.

    ariaLabel: InputSignal<string> = ...

    Accessible label forwarded to the native <input> as aria-label.

    datasource: InputSignal<AutocompleteDatasource<T>> = ...

    Datasource that provides completion suggestions.

    disabled: InputSignal<boolean> = ...

    Whether the control is disabled.

    displayWith: InputSignal<(item: T) => string> = ...

    Function that returns a display string for a selected item. Used for chips (multiple mode) and the input value (single mode). Defaults to String(item).

    isOpen: WritableSignal<boolean> = ...

    Whether the suggestion popup is visible.

    itemRemoved: OutputEmitterRef<T> = ...

    Fired when a chip / item is removed in multiple mode.

    itemSelected: OutputEmitterRef<T> = ...

    Fired when a suggestion is picked from the popup.

    itemTemplate: Signal<TemplateRef<{ $implicit: T }> | undefined> = ...

    Consumer-projected template for rendering each suggestion item.

    listboxId: string = ...

    Unique listbox id for ARIA.

    minChars: InputSignal<number> = ...

    Minimum number of characters before a query is executed. Defaults to 1.

    multiple: InputSignal<boolean> = ...

    Whether to allow multiple selections. When false (default), picking an item closes the popup and replaces the value. When true, picked items accumulate as chips above the input.

    placeholder: InputSignal<string> = ...

    Placeholder text shown when the input is empty.

    query: WritableSignal<string> = ...

    Raw text in the input.

    suggestions: Signal<T[]> = ...

    The list of current suggestions from the datasource.

    trackBy: InputSignal<((item: T) => unknown) | undefined> = ...

    Optional trackBy function for identity comparison. When provided, duplicate-checks use this key.

    value: ModelSignal<readonly T[]> = ...

    Currently selected item(s). Two-way bindable via [(value)].

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties