Angular Material chips tutorials | mat-chip-list example

Angular Material chips tutorials | mat-chip-list example

Angular material chips use to display a group of tags in a single element as chips for a blog post.

These can be used in the following cases. Input chips are used to represent the type of entered information filter chips are used to filter the group of data, an example is a category or tags of a blog post content

The Basic Chip UI component contains the following.

  • Chip container - It is a required parent container for holding a group of elements or chips
  • image - It is an optional thumbnail image of Chips to display the type of chips
  • string - Name of the chip, examples are tags,
  • delete icon - Optional close icon to close the chip.

In this blog post, List out the various examples of usage of chips using angular material.

This post doesn’t cover how to create an angular application, And it covers adding chips code to the angular application.

Angular material chips

Chip is a UI element to display the list of objects in individual elements in the form of chips. matChip is a selector used to display the material style of chips on UI pages.

Chips-related components are inbuilt into the angular module in the form of ‘MatChipsModule’.

Import angular material chip module

All you need to do is import the MatChipsModule module into your application. You can add import in your component, app.module.ts, or shared common module. I am adding this module to the app.module.ts file.

import { NgModule } from "@angular/core";
import { MatChipsModule } from "@angular/material/chips";

@NgModule({
  imports: [MatChipsModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: [],
  exports: [],
})
export class AppModule {}

Now, the application has access to the following components and directives of MatChipsModule available in your components.

  • mat-chip-list,matChipRemove selectors, etc…
  • mat-chip-list and mat-chip components
  • matChipList directives

What is the next step? We’ll look at some examples of how material chips can be used.

material chips basic example

We are going to create basic chip list elements in angular using the mat-chip-list component.

<p>basic-chip works!</p>
<mat-form-field class="example-chip-list">
  <mat-chip-list #chipList>
    <mat-chip
      *ngFor="let country of countries"
      [selectable]="selectable"
      [removable]="removable"
      (removed)="remove(country)"
    >
      {{country.name}}
      <mat-icon matChipRemove *ngIf="removable">Ab</mat-icon>
    </mat-chip>
    <input
      placeholder="New Country..."
      [matChipInputFor]="chipList"
      [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
      [matChipInputAddOnBlur]="addOnBlur"
      (matChipInputTokenEnd)="add($event)"
    />
  </mat-chip-list>
</mat-form-field>

Here is an angular component for the material chips component

import { COMMA, ENTER } from "@angular/cdk/keycodes";
import { Component, OnInit } from "@angular/core";
import { MatChipInputEvent } from "@angular/material";

export interface Country {
  name: string;
}
@Component({
  selector: "app-basic-chip",
  templateUrl: "./basic-chip.component.html",
  styleUrls: ["./basic-chip.component.css"]
})
export class BasicChipComponent {
  visible = true;
  selectable = true;
  removable = true;
  addOnBlur = true;
  readonly separatorKeysCodes: number[] = [ENTER, COMMA];
  countries: Country[] = [
    { name: "India" },
    { name: "USA" },
    { name: "Apple" }
  ];

  add(event: MatChipInputEvent): void {
    const input = event.input;
    const value = event.value;

    if ((value || "").trim()) {
      this.countries.push({ name: value.trim() });
    }

    // Reset the input value
    if (input) {
      input.value = "";
    }
  }

  remove(country: Country): void {
    const index = this.countries.indexOf(country);

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