Angular Material Chip

Introduction:

The Angular team created the UI component library known as Angular Material to create design elements for desktop and mobile web apps.

We must have Angular installed in our project in order to install it; after you do, use the command below to download it. Labels are the principal usage for mat-chip-list.

An angular directive named md-chips is utilized as a chip-like special component. It is utilized to describe a concise collection of data, such as a contact, tag, etc.

The contents of a chip can be shown using a customised template. The md-chip-template element with the custom content must be specified as md-chips in order to do this. A list of values is shown as individual, keyboard-accessible chips using the mat-chip-list> command.

Now, Let’s start code…

To impletement Angular material Chip foolow below steps.

Step 1: Create a new Project
Create a new project by below command.

ng new ChipDemo

Step 2: Install Angular Material

Install the angular material using the below-mentioned command.

ng add @angular/material

Step 3: Import MatChipsModule

After completing the installation, Import ‘MatChipsModule’ from ‘@angular/material/chips’ in the app.module.ts file.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MatChipsModule } from '@angular/material/chips';
import { MatFormFieldModule, MatLabel } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import {MatIconModule} from '@angular/material/icon';
MatLabel

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatChipsModule,
    MatFormFieldModule,
    MatInputModule,
    MatIconModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: App.component.html file

• Then use the <mat-chip-list> tag to group all the labels or items inside this group tag.
• We must use the <mat-chip> tag for each item or label inside the <mat-chip-list> tag.
• We also have a chip-list type in Angular Material called a stack chip-list, where all the chips or labels are stacked vertically.
• Using the colour attribute, we can alter the theme if we so like. There are three themes in Angular: primary, accent, and warn.

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

Step 5: Copy code in app.component.ts file

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: 'orange'},  
    {name: 'Lime'},  
    {name: 'Apple'},  
  ];  
  add(event: MatChipInputEvent): void {  
    const input = event.input;  
    const value = event.value;   
    if ((value || '').trim()) {  
      this.fruits.push({name: value.trim()});  
    }  
    if (input) {  
      input.value = '';  
    }  
  }  
  remove(fruit: Fruit): void {  
    const index = this.fruits.indexOf(fruit);  
  
    if (index >= 0) {  
      this.fruits.splice(index, 1);  
    }  
  }  
}

Step 6: app.component.css

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

Now run the project.

OUTPUT: