New to Kendo UI for Angular? Start a free 30-day trial

Data Binding

The AutoComplete enables you to bind it to local data by using arrays of primitive and complex values as well as to remote data by using a service, an asynchronous source, or observables.

Binding to Local Data

When binding it to local data, the AutoComplete provides options for:

Arrays of Primitive Data

The following example demonstrates how to bind the AutoComplete to an array of primitive data.

Example
View Source
Edit In Stackblitz  
Change Theme:

Arrays of Complex Data

When the component is bound to objects, define the valueField input. valueField has to point to a property of type string. As a result, the AutoComplete extracts the input from the selected data item and in this way sets the value of the component.

The following example demonstrates how to bind the AutoComplete to an array of complex data.

Example
View Source
Edit In Stackblitz  
Change Theme:

Binding to Remote Data

When binding it to remote data, the AutoComplete provides options for:

Services

The following example demonstrates how to bind the AutoComplete to remote data by using a service.

Example
View Source
Edit In Stackblitz  
Change Theme:

Async Pipe

The following example demonstrates how to bind the AutoComplete to an asynchronous source.

Example
View Source
Edit In Stackblitz  
Change Theme:

Streaming of Data

You can also bind the AutoComplete to asynchronous data (observables) by using the async pipe.

The following example demonstrates how to utilize this approachthe demo starts with an empty observable, produces one random value each second, and emits values in batches of five.

Example
View Source
Edit In Stackblitz  
Change Theme: