Controlled

Drives every piece of state from the outside. The committed value, the inputValue (text in the box) and the open state are independent two-way models, so external buttons can set or reset each one at will.

Overview

Examples

Usage

Import AutocompleteComponent and configure it with the inputs below. The full runnable source is on the Examples tab.

html

<autocomplete
  [options]="films"
  [(value)]="value"
  [(inputValue)]="inputValue"
  [(open)]="open"
  appearance="outline"
  label="Movie" />

API

This example demonstrates the inputs below. See the Autocomplete introduction for the complete API — every input, output, content template and filter helper.

Inputs

Name	Type	Default	Description
`value`	`T \| T[] \| null`	`null`	Two-way selected value (model). An array when multiple.
`inputValue`	`string`	`''`	Two-way text shown in the box (model); independent of value.
`open`	`boolean`	`false`	Two-way popup open state (model).