Angular MultiSelect Data Binding
The Angular MultiSelect provides flexible data-binding to display items in its dropdown list. Set the data property to an array of primitive values (strings or numbers) or complex objects.
Choose the binding approach that best fits your data source and application requirements.
You can bind the MultiSelect to:
Binding to Local Data
Local data binding refers to providing the data directly in the component. The MultiSelect supports the following local data types:
Arrays of Primitive Data
To bind the MultiSelect to an array of strings or numbers, assign the array to the data property. No additional configuration is required because the component uses the primitive values as both display text and underlying values.
<kendo-multiselect [data]="['Baseball', 'Basketball', 'Tennis']"></kendo-multiselect>The following example demonstrates how to bind the MultiSelect to an array of primitive data.
Arrays of Complex Data
To bind the MultiSelect to an array of objects, set the textField and valueField properties. The textField property specifies which object field the component displays in the dropdown list, while the valueField property specifies which field the component uses as the item value.
<kendo-multiselect
[data]="products"
textField="productName"
valueField="productId">
</kendo-multiselect>To emit primitive values instead of objects when the user selects items, set the
valuePrimitiveproperty totrue. For more details, refer to the Value Binding article.
The following example demonstrates how to bind the MultiSelect to an array of complex data.
Binding to Remote Data
For remote data scenarios, the MultiSelect supports the following approaches:
- Using a service—Fetch data through an Angular service and assign the results to the
dataproperty. - Using the async pipe—Bind an Observable directly to the
dataproperty by using the Angularasyncpipe. - Streaming data—Bind to an Observable that emits values over time.
Services
You can fetch data from a remote endpoint through an Angular service and assign the result to the data property. This approach gives you full control over request parameters and response handling.
The following example demonstrates how to bind the MultiSelect to remote data by using a service.
Async Pipe
To bind the MultiSelect directly to an Observable, use the Angular async pipe. The async pipe subscribes to the Observable and updates the data property automatically when new data arrives.
<kendo-multiselect [data]="products$ | async"></kendo-multiselect>The following example demonstrates how to bind the MultiSelect to an asynchronous source.
Streaming of Data
The MultiSelect also supports binding to Observables that emit values over time. Use the async pipe to subscribe to the Observable and update the dropdown list as new values arrive.
<kendo-multiselect [data]="listItems | async"></kendo-multiselect>The following example starts with an empty Observable, produces one random value each second, and emits values in batches of five.