Typeahead

Basic

Provide [data] and get a dropdown of suggestions as the user types.

<ngb-typeahead
            [data]="items"
            [debounceTime]="150"
            [limit]="5"
          (selectionChange)="selected = $event"></ngb-typeahead>

Dropdown button

Enable [showDropdownButton] to open/close suggestions on demand (even with an empty query).

<ngb-typeahead
            [data]="items"
          [showDropdownButton]="true"></ngb-typeahead>

Match selection

Use [matchSelection] to force picking a suggestion. If the input doesn't match any suggestion when closing, it clears.

<ngb-typeahead
            [data]="items"
          [matchSelection]="true"></ngb-typeahead>

Multi-select

Enable [multiSelect] to select multiple items with checkboxes. Selecting an item updates the input immediately (showing the chosen labels) and keeps the dropdown open until you click outside.

<ngb-typeahead
            [data]="items"
            [multiSelect]="true"
          (selectionChange)="tags = $event"></ngb-typeahead>

Chips

With [multiSelect] and [chips], the typeahead behaves like a tags input. Use [separator], [updateOnBlur], and [updateOnTab] to control how values get added.

<ngb-typeahead
            [data]="items"
            [multiSelect]="true"
            [chips]="true"
            [updateOnBlur]="true"
            [updateOnTab]="true"
          [separator]="[',']"></ngb-typeahead>

With update on Blur

Add a chip when the input loses focus. This example uses an empty data source so you can add any value.

<ngb-typeahead
            [data]="[]"
            [multiSelect]="true"
            [chips]="true"
            [updateOnBlur]="true"
          [characterTyped]="999"></ngb-typeahead>

With Separator

Add chips by typing a separator. Try alpha,beta,gamma (comma adds each token).

<ngb-typeahead
            [data]="[]"
            [multiSelect]="true"
            [chips]="true"
            [separator]="[',']"
          [characterTyped]="999"></ngb-typeahead>

With update on Tab

Press Tab to add the current token as a chip and keep typing (focus stays in the input).

<ngb-typeahead
            [data]="[]"
            [multiSelect]="true"
            [chips]="true"
            [updateOnTab]="true"
          [characterTyped]="999"></ngb-typeahead>

Custom item template

Pass [itemTemplate] to render suggestions with your own layout (badges, icons, metadata, etc.).

<ng-template #itemTpl let-item="item">
            <span class="badge text-bg-light border">{{ item.id }}</span>
            <span>{{ item.label }}</span>
            </ng-template>
          <ngb-typeahead [data]="items" [itemTemplate]="itemTpl"></ngb-typeahead>

Virtual scroll

For huge lists, enable [vScroll] so the overlay only renders the visible rows (better performance). Use [vItemSize] to match your row height.

<ngb-typeahead
            [data]="items"
            [showDropdownButton]="true"
            [vScroll]="true"
            [vItemSize]="36"
          [limit]="0"></ngb-typeahead>

Reactive forms

Typeahead implements ControlValueAccessor, so it can be used with formControlName / formControl. If your items provide value, that is what the form stores.

<form [formGroup]="form">
            <ngb-typeahead [data]="items" formControlName="country"></ngb-typeahead>
          </form>

Accessibility & keyboard

Typeahead exposes role="combobox", wires aria-controls, and keeps focus in the input. Arrow keys move through options; Enter selects; Escape closes the suggestion list.

<ngb-typeahead aria-label="Search commands" [data]="items"></ngb-typeahead>