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 inputs:
label—The text of the Chip.svgIcon,icon, andiconClass—The icon of the Chip.avatarSettings—The avatar of the Chip.selected—The initial selected state of the Chip. For more details, refer to the Selection Mode article.disabled—Determines whether the Chip is disabled.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.
Item Removal
To remove a Chip, update the bound collection in the remove event handler. Use the removedChip field of the event arguments to find the corresponding data item.
Item Selection
The 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 article.