# ChipList Data Binding

The ChipList renders the Chip components that you declare as its content. To bind it to a collection, iterate the collection with `@for` and render a Chip for each data item. Set the Chip inputs from the fields of the item.

## Item Fields

Map the fields of each data item to the following [Chip](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/chipcomponent) inputs:

* [`label`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/chipcomponent#label)—The text of the Chip.
* [`svgIcon`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/chipcomponent#svgicon), [`icon`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/chipcomponent#icon), and [`iconClass`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/chipcomponent#iconclass)—The icon of the Chip.
* [`avatarSettings`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/chipcomponent#avatarsettings)—The avatar of the Chip.
* [`selected`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/chipcomponent#selected)—The initial selected state of the Chip. For more details, refer to the [Selection Mode](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/chiplist/selection-mode) article.
* [`disabled`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/chipcomponent#disabled)—Determines whether the Chip is disabled.
* [`removable`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/chipcomponent#removable)—Determines whether the Chip displays a remove icon.

The following example binds the ChipList to an array of month objects. Each item sets the label and the disabled state of its Chip.

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

## Item Removal

To remove a Chip, update the bound collection in the [`remove`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/chiplistcomponent#remove) event handler. Use the `removedChip` field of the event arguments to find the corresponding data item.

## Item Selection

The [`selectedChange`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/chiplistcomponent#selectedchange) event emits the zero-based indexes of the selected Chips. Use these indexes to read the corresponding data items from the bound collection. For more details, refer to the [ChipList Events](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/chiplist/events) article.

## Suggested Links

* [API Reference of the ChipList](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/chiplistcomponent)
* [API Reference of the Chip](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/chipcomponent)