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

Output:

Angular Material Chips

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;    fruits: string[] = [‘Lemon’];    allFruits: string[] = [‘Apple’, ‘Lemon’, ‘Lime’, ‘Orange’, ‘Strawberry’];    @ViewChild(‘fruitInput’) fruitInput: ElementRef;    @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

Output:

Angular Material Chips

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

angular angular 8 angular material angular material features angular material tutorial angularjs angularjs vs angular css html javascript what is angular material

Angular Material Chips

Angular Material Chips

Unstyled chips

Selection

Disabled chips

Chip Input

Keyboard interaction

Orientation

Specifying global configuration defaults

Theming

Accessibility

Angular Reactive Forms

Bootstrap Modal Popup in Angular 9/8

You may also like