New to Kendo UI for AngularStart a free 30-day trial

Data Binding

The DropDownList 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 DropDownList provides options for:

Arrays of Primitive Data

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

Change Theme
Theme
Loading ...

Arrays of Complex Data

When the component is bound to complex data (objects), define the textField and valueField properties. The DropDownList will extract the value and text values from the selected data item and in this way will set the selected value and text.

If you do not intend to use an object as a value, bind the DropDownList to a primitive field value instead. For more information, refer to the article on value binding.

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

Change Theme
Theme
Loading ...

Binding to Remote Data

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

Services

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

Change Theme
Theme
Loading ...

Async Pipe

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

Change Theme
Theme
Loading ...

Streaming of Data

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

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

Change Theme
Theme
Loading ...