Angular Material Chips

The md-chips is an angular directive used as a special component called a chip. It is used to represent a small set of information, for example, a contact, tag, etc. A custom template can be used to render the contents of a chip. It can be achieved by specifying the md-chip-template element containing the custom content as md-chips. The <mat-chip-list> displays a list of values as individual, keyboard accessible, chips.

<mat-chip-list aria-label="Fish selection">
  <mat-chip>One fish</mat-chip>
  <mat-chip>Two fish</mat-chip>
  <mat-chip color="primary" selected>Primary fish</mat-chip>
  <mat-chip color="accent" selected>Accent fish</mat-chip>
</mat-chip-list>

Unstyled chips

By default, content design styles are implemented in <mat-chip>. For any styled chip, do not use <mat-basic-chip>. We can optimize chip appearance by implementing CSS.

<mat-basic-chip> gets the mat-basic-chip CSS class in addition to the mat-chip-class.

Selection

The chips are selected through the selected property. It can be disabled by selecting to select on <mat-chip-list>.

Whenever the state of the selection changes, a chipselectionchange is emitted through the event (selection change).

Disabled chips

Individual chips will be disabled by implementing the Disabled attribute on the chip. When disabled, chips are neither selectable nor noticeable.

Chip Input

The MatChipInput directive will be used with a chip list to streamline the interaction between the two components. The directive adds chip-specific behaviour to the input element within <mat-form-field> to add and remove the chip. With MatChipInput <input> will be placed inside or outside the chip-list element.

Example of chip input inside a chip-list element.

app.component.html

<mat-form-field class="example-chip-list">
  <mat-label>Favorite Fruits</mat-label>
  <mat-chip-list #chipList aria-label="Fruit selection">
    <mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
             [removable]="removable" (removed)="remove(fruit)">
      {{fruit.name}}
      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
    </mat-chip>
    <input placeholder="New fruit..."
           [matChipInputFor]="chipList"
           [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
           [matChipInputAddOnBlur]="addOnBlur"
           (matChipInputTokenEnd)="add($event)">
  </mat-chip-list>
</mat-form-field>

app.component.ts

import {COMMA, ENTER} from '@angular/cdk/keycodes';
import {Component} from '@angular/core';
import {MatChipInputEvent} from '@angular/material/chips';
export interface Fruit {
  name: string;
}
/**
 * @title Chips with input
 */
@Component({
  selector: 'chips-input-example',
  templateUrl: 'chips-input-example.html',
  styleUrls: ['chips-input-example.css'],
})
export class ChipsInputExample {
  visible = true;
  selectable = true;
  removable = true;
  addOnBlur = true;
  readonly separatorKeysCodes: number[] = [ENTER, COMMA];
  fruits: Fruit[] = [
    {name: 'Lemon'},
    {name: 'Lime'},
    {name: 'Apple'},
  ];
  add(event: MatChipInputEvent): void {
    const input = event.input;
    const value = event.value;
    // Add our fruit
    if ((value || '').trim()) {
      this.fruits.push({name: value.trim()});
    }
    // Reset the input value
    if (input) {
      input.value = '';
    }
  }
  remove(fruit: Fruit): void {
    const index = this.fruits.indexOf(fruit);

    if (index >= 0) {
      this.fruits.splice(index, 1);
    }
  }
}

app.component.css

.example-chip-list {
  width: 100%;
}

Output:

An example of chip input placed outside the chip-list element.

<mat-form-field>
  <mat-chip-list #chipList>
    <mat-chip>Chip 1</mat-chip>
    <mat-chip>Chip 2</mat-chip>
  </mat-chip-list>
  <input [matChipInputFor]="chipList">
</mat-form-field>

An example of chip input with an auto complete placed inside the chip-list element.

app.component.html

mport {COMMA, ENTER} from '@angular/cdk/keycodes';
import {Component, ElementRef, ViewChild} from '@angular/core';
import {FormControl} from '@angular/forms';
import {MatAutocompleteSelectedEvent, MatAutocomplete} from '@angular/material/autocomplete';
import {MatChipInputEvent} from '@angular/material/chips';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';
/**
 * @title Chips Autocomplete
 */
@Component({
  selector: 'chips-autocomplete-example',
  templateUrl: 'chips-autocomplete-example.html',
  styleUrls: ['chips-autocomplete-example.css'],
})
export class ChipsAutocompleteExample {
  visible = true;
  selectable = true;
  removable = true;
  separatorKeysCodes: number[] = [ENTER, COMMA];
  fruitCtrl = new FormControl();
  filteredFruits: Observable<string[]>;
  fruits: string[] = ['Lemon'];
  allFruits: string[] = ['Apple', 'Lemon', 'Lime', 'Orange', 'Strawberry'];
  @ViewChild('fruitInput') fruitInput: ElementRef<HTMLInputElement>;
  @ViewChild('auto') matAutocomplete: MatAutocomplete;
  constructor() {
    this.filteredFruits = this.fruitCtrl.valueChanges.pipe(
        startWith(null),
        map((fruit: string | null) => fruit ? this._filter(fruit) : this.allFruits.slice()));
  }
  add(event: MatChipInputEvent): void {
    const input = event.input;
    const value = event.value;
    // Add our fruit
    if ((value || '').trim()) {
      this.fruits.push(value.trim());
    }
    // Reset the input value
    if (input) {
      input.value = '';
    }
    this.fruitCtrl.setValue(null);
  }
  remove(fruit: string): void {
    const index = this.fruits.indexOf(fruit);
    if (index >= 0) {
      this.fruits.splice(index, 1);
    }
  }
  selected(event: MatAutocompleteSelectedEvent): void {
    this.fruits.push(event.option.viewValue);
    this.fruitInput.nativeElement.value = '';
    this.fruitCtrl.setValue(null);
  }
  private _filter(value: string): string[] {
    const filterValue = value.toLowerCase();
    return this.allFruits.filter(fruit => fruit.toLowerCase().indexOf(filterValue) === 0);
  }
}

app.component.css

.example-chip-list {
  width: 100%;
}

Output:

Keyboard interaction

Users can move by the chips using the arrow keys and select /deselect them with space. Clicking also focuses on the chips, ensuring that keyboard navigation begins on the appropriate chip.

Orientation

If you want the chips in the list to be stacked vertically, instead of horizontally, you can apply the mat-chip-list-stacked class, as well as the aria-orientation="vertical" attribute:

<mat-chip-list class="mat-chip-list-stacked" aria-label="Color selection">
  <mat-chip *ngFor="let chip of availableColors" selected [color]="chip.color">
    {{chip.name}}
  </mat-chip>
</mat-chip-list>

Specifying global configuration defaults

Default options for the chips module can be specified using the MAT_CHIPS_DEFAULT_OPTIONS injection token.

@NgModule({
  providers: [
    {
      provide: MAT_CHIPS_DEFAULT_OPTIONS,
      useValue: {
        separatorKeyCodes: [ENTER, COMMA]
      }
    }
  ]
})

Theming

The selected color of a <mat-chip> can be changed by using the color property. By default, chips use a neutral background color depending on the current theme (light or dark). It can be changed to 'Primary,' 'accent' or 'Warn'.

Accessibility

A chip-list behaves as a role = "listbox", with each chip having a role = "option". The chip input must contain a placeholder or be given a meaningful label via area-label or area-labeledby.

Next TopicAngular Material Select

← prev next →