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:
Expected Output
The chips with a little remove button on the right:
Chips can be selected via the selected property. Selection can be disabled by setting selectable to false on the <mat-chip-list> .
addOnBlur: boolean. Whether or not the chipEnd event will be emitted when the input is blurred.
The md-contact-chips, an Angular Directive, is an input control built on md-chips and uses the md-autocomplete element. The contact chip component accepts a query expression which returns a list of possible contacts. The user can select one of these and add it to the list of availble chips.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With