Components

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.

Official docs API reference

Example

Below is an example of how BuilderKit restyles the Angular Material Chips and gives it a more modern appearance.

Basic chips

One fish

Two fish

Three fish

Four fish

Basic chips

One fish

Two fish

Three fish

Four fish

Chips with icons

One fish

Two fish

Three fish

Four fish

Chips with avatars

Dog one

Dog two

Dog three

Chip listbox

Chips with input

angular

how-to

tutorial

accessibility

angular

how-to

tutorial

accessibility

Favorite Fruits (editable)

Lemon

Lime

Apple

Chips with autocomplete

<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>