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