Chips
Angular Material Chips are compact elements that represent input, attributes, or actions such as tags, categories, or filters. Chips can be interactive and allow users to select or remove them. A chip can carry an icon or an avatar in front of its label, a small cross that takes it off the row, and it can be typed into a field one chip after another. BuilderKit restyles the chip surface, its selected state and that remove button.
Chips pair naturally with an autocomplete, which suggests the next chip while it is being typed.
Example
Below is an example of how BuilderKit restyles the Angular Material Chips and gives it a more modern appearance.
Dog one Dog two Dog three <mat-chip-set>
<mat-basic-chip>One fish</mat-basic-chip>
<mat-basic-chip>Two fish</mat-basic-chip>
<mat-basic-chip>Three fish</mat-basic-chip>
<mat-basic-chip disabled>Four fish</mat-basic-chip>
</mat-chip-set>
<mat-form-field>
<mat-chip-grid #chipGrid>
@for (keyword of keywords(); track keyword) {
<mat-chip-row (removed)="removeKeyword(keyword)">
<mat-icon matChipAvatar svgIcon="fish-symbol" />
{{ keyword }}
<button matChipRemove>
<mat-icon svgIcon="x" />
</button>
</mat-chip-row>
}
<input placeholder="New keyword..." [matChipInputFor]="chipGrid" (matChipInputTokenEnd)="addKeyword($event)" />
</mat-chip-grid>
</mat-form-field>Filter chips with multiple selection
Several chips can stay selected at the same time, each one marked with a checkmark in front of its label, which turns the row into a compact set of filters.
<mat-chip-listbox multiple aria-label="Water selection">
<mat-chip-option selected>Freshwater</mat-chip-option>
<mat-chip-option>Saltwater</mat-chip-option>
<mat-chip-option selected>Tropical</mat-chip-option>
<mat-chip-option>Deep sea</mat-chip-option>
</mat-chip-listbox>