# Angular ComboBox Data Binding

The [Angular ComboBox](https://www.telerik.com/kendo-angular-ui-develop/components/dropdowns/combobox) provides flexible data-binding to display items in its dropdown list. Set the [`data`](https://www.telerik.com/kendo-angular-ui-develop/components/dropdowns/api/comboboxcomponent#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 ComboBox to:

<Row>
  <Column count={[24,24,12]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="#binding-to-local-data">
      <ComponentTitle>Local Data</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Bind to arrays of primitive values or complex objects that are available on the client-side.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,12]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="#binding-to-remote-data">
      <ComponentTitle>Remote Data</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Fetch data from a remote endpoint through services, the async pipe, or streaming Observables.</ComponentDescription>
    </Component>
  </Column>
</Row>

## Binding to Local Data

Local data binding refers to providing the data directly in the component. The ComboBox supports the following local data types:

* [Arrays of primitive data (strings, numbers, or other)](https://www.telerik.com/kendo-angular-ui-develop/components/dropdowns/combobox/data-binding#arrays-of-primitive-data)
* [Arrays of complex data (objects)](https://www.telerik.com/kendo-angular-ui-develop/components/dropdowns/combobox/data-binding#arrays-of-complex-data)

### Arrays of Primitive Data

To bind the ComboBox to an array of strings or numbers, assign the array to the [`data`](https://www.telerik.com/kendo-angular-ui-develop/components/dropdowns/api/comboboxcomponent#data) property. No additional configuration is required because the component uses the primitive values as both display text and underlying values.

```html
<kendo-combobox [data]="['Small', 'Medium', 'Large']"></kendo-combobox>
```

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

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dropdowns/combobox/data_binding/source.txt)

### Arrays of Complex Data

To bind the ComboBox to an array of objects, set the [`textField`](https://www.telerik.com/kendo-angular-ui-develop/components/dropdowns/api/comboboxcomponent#textfield) and [`valueField`](https://www.telerik.com/kendo-angular-ui-develop/components/dropdowns/api/comboboxcomponent#valuefield) properties. The [`textField`](https://www.telerik.com/kendo-angular-ui-develop/components/dropdowns/api/comboboxcomponent#textfield) property specifies which object field the component displays in the dropdown list, while the [`valueField`](https://www.telerik.com/kendo-angular-ui-develop/components/dropdowns/api/comboboxcomponent#valuefield) property specifies which field the component uses as the item value.

```html
<kendo-combobox
    [data]="products"
    textField="productName"
    valueField="productId">
</kendo-combobox>
```

```ts
public products: Array<{ productName: string; productId: number }> = [
    { productName: "Product 1", productId: 1 },
    { productName: "Product 2", productId: 2 },
    { productName: "Product 3", productId: 3 },
];
```

> To emit primitive values instead of objects when the user selects an item, set the [`valuePrimitive`](https://www.telerik.com/kendo-angular-ui-develop/components/dropdowns/api/comboboxcomponent#valueprimitive) property to `true`. For more details, refer to the [Value Binding](https://www.telerik.com/kendo-angular-ui-develop/components/dropdowns/combobox/value-binding) article.

The following example demonstrates how to bind the ComboBox to an array of objects.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dropdowns/combobox/data_binding/complex_data/source.txt)

## Binding to Remote Data

For remote data scenarios, the ComboBox supports the following approaches:

* [Using a service](https://www.telerik.com/kendo-angular-ui-develop/components/dropdowns/combobox/data-binding#services)—Fetch data through an Angular service and assign the results to the [`data`](https://www.telerik.com/kendo-angular-ui-develop/components/dropdowns/api/comboboxcomponent#data) property.
* [Using the async pipe](https://www.telerik.com/kendo-angular-ui-develop/components/dropdowns/combobox/data-binding#async-pipe)—Bind an Observable directly to the [`data`](https://www.telerik.com/kendo-angular-ui-develop/components/dropdowns/api/comboboxcomponent#data) property by using the Angular [`async`](https://angular.dev/api/common/AsyncPipe) pipe.
* [Streaming data](https://www.telerik.com/kendo-angular-ui-develop/components/dropdowns/combobox/data-binding#streaming-of-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`](https://www.telerik.com/kendo-angular-ui-develop/components/dropdowns/api/comboboxcomponent#data) property. This approach gives you full control over request parameters and response handling.

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

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dropdowns/combobox/remote_binding/source.txt)

### Async Pipe

To bind the ComboBox directly to an Observable, use the Angular [`async`](https://angular.dev/api/common/AsyncPipe) pipe. The [`async`](https://angular.dev/api/common/AsyncPipe) pipe subscribes to the Observable and updates the [`data`](https://www.telerik.com/kendo-angular-ui-develop/components/dropdowns/api/comboboxcomponent#data) property automatically when new data arrives.

```html
<kendo-combobox [data]="products$ | async"></kendo-combobox>
```

```ts
public products$: Observable<any> = this.service.getProducts();
```

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

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dropdowns/combobox/async_sources/source.txt)

### Streaming of Data

The ComboBox also supports binding to Observables that emit values over time. Use the [`async`](https://angular.dev/api/common/AsyncPipe) pipe to subscribe to the Observable and update the dropdown list as new values arrive.

```html
<kendo-combobox [data]="listItems | async"></kendo-combobox>
```

```ts
public listItems: Observable<string[]> = interval(1000).pipe(
    map((x) => "New item " + x),
    // Emit suggestions in batches so the list updates five items at a time.
    bufferCount(5)
);
```

The following example starts with an empty Observable, produces one random value each second, and emits values in batches of five.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dropdowns/combobox/data_binding/streaming_data/source.txt)

## Suggested Links

* [Value Binding](https://www.telerik.com/kendo-angular-ui-develop/components/dropdowns/combobox/value-binding)
* [Filtering](https://www.telerik.com/kendo-angular-ui-develop/components/dropdowns/combobox/filtering)
* [API Reference of the ComboBox](https://www.telerik.com/kendo-angular-ui-develop/components/dropdowns/api/comboboxcomponent)