## Chip

- Angular Material Chips
- BCI Chips

### Angular Material Chips

#### Plain Chips

Plain Angular Material Chips (mat-chip) which are not wrapped inside a chip-list

Apple Banana Tomato Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dia Milk

#### Basic Chips (mat-basic-chip)

Plain Angular Material Chips (mat-basic-chip) which are not wrapped inside a chip-list

Apple Banana Milk Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dia Tomato (disabled)

#### Chips (mat-chip) wrapped in a chip set (mat-chip-set)

Apple Milk Tomato

#### Chips in a listbox (mat-chip-listbox and mat-chip-option)

You can select multiple chips.

Summer Meteorology Chip (disabled) Season Beach Southern Hemisphere Daylight Thunderstorm Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dia

#### Chips in a listbox (mat-chip-listbox and mat-chip-option)

Summer Meteorology Season Beach Hawaii Cocktail Cloudless Disabled Cloudless Selected Disabled Cloudless

### BCI Chips

Since Angular Material changed the implementation of the chips there are now two categories of chips. Removable and Selectable. You cannot have both combined in one chip. Therefore we introduce the new `bci-chip-selectable` chip. This chip is selectable via click. The `bci-chip` can be used as a removable one. Both bci-chips have the same features like before Web Core 17. They differ only for the option to select and remove.

#### Bci Chip Selectable

##### Bci Chips (`bci-chip-selectable`) warpped in a mat-chip-listbox

Apple Banana Tomato Milk Cacao milk Cucumber

#### Selected Chips with truncated text (disabled)

I am not clickable! Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dia

#### Chips with shrinked content and tooltip

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dia Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dia Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dia Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dia Hover over the chips to see the full content within a tooltip.

#### Multiple Chips together

This bci chip selectable is disabled This chip is selected This chip is selected and disabled Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dia Daylight Thunderstorm Solar Term Midsummer Day Water Sports Sun Outdoor Roadtrip Hawaii Cocktail Cloudless

#### Bci Chip (`bci-chip`)

##### Removable Chips

Removable Chip Remove me! This chip is removable Via the 'removed' Event you can integrate your own procedure for removing a chip. In this demo just a message is dropped as toast.

##### Removable Chips (disabled)

Removable Chip Remove me! This chip is removable