# Angular MultiColumnComboBox Data Binding

The [Angular MultiColumnComboBox](https://www.telerik.com/kendo-angular-ui-develop/components/dropdowns/multicolumncombobox) provides flexible data-binding to display items in a multi-column dropdown list. Set the [`data`](https://www.telerik.com/kendo-angular-ui-develop/components/dropdowns/api/multicolumncomboboxcomponent#data) property to an array of objects—to use primitive values, use the [ComboBox](https://www.telerik.com/kendo-angular-ui-develop/components/dropdowns/combobox) instead.

Choose the binding approach that best fits your data source and application requirements.

You can bind the MultiColumnComboBox 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 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 an Angular service.</ComponentDescription>
    </Component>
  </Column>
</Row>

## Fields Configuration

To bind the MultiColumnComboBox to object data, set the [`textField`](https://www.telerik.com/kendo-angular-ui-develop/components/dropdowns/api/multicolumncomboboxcomponent#textfield) and [`valueField`](https://www.telerik.com/kendo-angular-ui-develop/components/dropdowns/api/multicolumncomboboxcomponent#valuefield) properties. The [`textField`](https://www.telerik.com/kendo-angular-ui-develop/components/dropdowns/api/multicolumncomboboxcomponent#textfield) property specifies which object field the component displays in the input, while the [`valueField`](https://www.telerik.com/kendo-angular-ui-develop/components/dropdowns/api/multicolumncomboboxcomponent#valuefield) property specifies which field the component uses as the item value.

To define the columns in the dropdown popup, add a [`kendo-combobox-column`](https://www.telerik.com/kendo-angular-ui-develop/components/dropdowns/api/comboboxcolumncomponent) element for each column you want to display. For more details on the available column options, refer to the [Columns](https://www.telerik.com/kendo-angular-ui-develop/components/dropdowns/multicolumncombobox/columns) article.

```html

<kendo-multicolumncombobox
    [data]="products"
    textField="productName"
    valueField="productId">
    <kendo-combobox-column field="productName" title="Name"></kendo-combobox-column>
    <kendo-combobox-column field="unitPrice" title="Price"></kendo-combobox-column>
</kendo-multicolumncombobox>
```

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

> The MultiColumnComboBox can still emit primitive values when the user selects an item. For more details, refer to the [Value Binding](https://www.telerik.com/kendo-angular-ui-develop/components/dropdowns/multicolumncombobox/value-binding) article.

## Binding to Local Data

To bind the MultiColumnComboBox to local data, assign an array of objects to the [`data`](https://www.telerik.com/kendo-angular-ui-develop/components/dropdowns/api/multicolumncomboboxcomponent#data) property and configure the [`textField`](https://www.telerik.com/kendo-angular-ui-develop/components/dropdowns/api/multicolumncomboboxcomponent#textfield), [`valueField`](https://www.telerik.com/kendo-angular-ui-develop/components/dropdowns/api/multicolumncomboboxcomponent#valuefield), and column definitions.

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

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dropdowns/multicolumncombobox/data-binding/local-data/source.txt)

## Binding to Remote Data

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/multicolumncomboboxcomponent#data) property. To indicate that data is loading, set the [`loading`](https://www.telerik.com/kendo-angular-ui-develop/components/dropdowns/api/multicolumncomboboxcomponent#loading) property to `true`.

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

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dropdowns/multicolumncombobox/data-binding/remote-data/source.txt)

## Suggested Links

* [Value Binding](https://www.telerik.com/kendo-angular-ui-develop/components/dropdowns/multicolumncombobox/value-binding)
* [Columns](https://www.telerik.com/kendo-angular-ui-develop/components/dropdowns/multicolumncombobox/columns)
* [API Reference of the MultiColumnComboBox](https://www.telerik.com/kendo-angular-ui-develop/components/dropdowns/api/multicolumncomboboxcomponent)