# ButtonGroup Data Binding

The ButtonGroup renders the Button components that you declare as its content. To bind it to a collection of configuration objects, iterate the collection with `@for` and render a Button for each object. Each object can supply values such as the button text, [`svgIcon`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/buttoncomponent#svgicon), and [`selected`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/buttoncomponent#selected) state.

The following example renders each button from a collection. Its click handler updates the status icon color when the user clicks a button.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/buttons/buttongroup/overview/advanced-usage/status/source.txt)

## Storing Selected Buttons

When you bind the ButtonGroup to a collection of Buttons, you can track the selected buttons by storing that selection in a custom collection.

To track multiple selected buttons:

1. Set the [selection mode](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/buttongroupcomponent#selection) of the ButtonGroup to `multiple`. This is the default mode.
2. Handle the [`selectedChange`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/buttoncomponent#selectedchange) event of each button. Use its Boolean payload to add the corresponding item when the button is selected and remove it when the button is deselected.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/buttons/buttongroup/overview/advanced-usage/days/source.txt)

## Suggested Links

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