CODEWITHSUNDEEP
htmlangularangular-material
Compiler v2
Compiler v2

Reputation: 3605

Angular Material mat-chips not setting to be removable

Problem Statement

My problem is that when I am using Angular Material's mat-chip, it seems it cannot be set as removable even though I set it to true.

Code

<mat-form-field>
 <input matInput [matChipInputFor]="chipList" (matChipInputTokenEnd)="addOption($event)"
type="number" maxlength="4" placeholder="Enter an amount here">
 </mat-form-field>

<mat-chip-list>
<mat-chip #chipList *ngFor="let option of options" [removable]="true"
(removed)="removeOption(option)">{{option}}
</mat-chip>
</mat-chip-list>

RemoveOption Method

removeOption(option: String) {
    const index = this.options.indexOf(option);

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

Explanation of Code

As you can see, I have set [removable] to true and (removed) with a removeOption method. These things do not work for some strange reason.

I copied the example from here: https://material.angular.io/components/chips/examples, the section with the example is named: "Chips with Input"

Actual Output

The chips show no little remove button on the right:

enter image description here

Expected Output

The chips with a little remove button on the right:

enter image description here

Upvotes: 9

Views: 18474

Answers (6)

Poveu
Poveu

Reputation: 321

For standalone components folks, not importing the whole MatChipsModule: importing MatChipSet (or whatever) is not enough, you have to import MatChipRemove (even though the compiler is satisfied without it).

Upvotes: 3

Andres Ospino
Andres Ospino

Reputation: 21

If even after having incorporated the remove icon you still can't see the remove button as happened to me, then, after having implemented all the previous recommendations, make sure that in the module of your component you have imported these four modules:

MatChipGrid,
MatChipRow,
MatChipInput,
MatChipRemove,

But specifically, the one referring to the remove button is: MatChipRemove. This is the import you should add:

import { NgModule } from '@angular/core';
import {MyComponent} from "./my.component";
import {CommonModule} from "@angular/common";
import {MatButtonModule} from "@angular/material/button";
import {MatFormFieldModule} from "@angular/material/form-field";
import {MatInputModule} from "@angular/material/input";
import {ReactiveFormsModule} from "@angular/forms";
import {MatIconModule} from "@angular/material/icon";
import {MatChipGrid, MatChipInput, MatChipRemove, MatChipRow} from "@angular/material/chips";


@NgModule({
  declarations: [MyComponent],
  imports: [
    CommonModule,
    MatButtonModule,
    MatFormFieldModule,
    MatInputModule,
    ReactiveFormsModule,
    MatIconModule,
    MatChipGrid,
    MatChipRow,
    MatChipInput,
    MatChipRemove,
  ], exports: [MyComponent]
})
export class MyModule { }

Upvotes: 2

Valery Gavrilov
Valery Gavrilov

Reputation: 194

Noticed that if the mat-icon or any other element that does matChipRemove has style "pointer-events: none;" then click on the mat-icon (X) doesn't remove the chip. The chip still can be removed by the keyboard backspace button. Solution - set "pointer-events: auto;"

Upvotes: 1

Matheus Cassol
Matheus Cassol

Reputation: 51

You're not able to see the icon because the section <mat-icon matChipRemove>cancel</mat-icon> is missing from the code.

Your code should look like this:

<mat-chip-list>
<mat-chip #chipList *ngFor="let option of options" [removable]="true"
(removed)="removeOption(option)">{{option}}
<mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
</mat-chip-list>

Upvotes: 2

B. Diarra
B. Diarra

Reputation: 25

you are missing the icon tag.

<mat-chip-list>
<mat-chip #chipList *ngFor="let option of options" [removable]="true"
(removed)="removeOption(option)">{{option}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
</mat-chip-list>

Upvotes: 2

Ling Vu
Ling Vu

Reputation: 5181

You have to add the mat-icon to trigger the removal. In the material example you have:

   <mat-chip
      *ngFor="let fruit of fruits"
      [selectable]="selectable"
      [removable]="removable"
      (removed)="remove(fruit)">
      {{fruit}}
      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
    </mat-chip>

This contains the action to trigger matChipRemove inside the mat-icon.

Link for demo: https://stackblitz.com/angular/mjygopomxvq?file=src%2Fapp%2Fchips-autocomplete-example.html

Upvotes: 15

Related Questions