How to implement <mat-chip-list> with single selection instead of multi selection-CodePudding

<mat-chip-list multiple="false" aria-label="Fish selection">
    <mat-chip>One fish</mat-chip>
    <mat-chip>Two fish</mat-chip>
    <mat-chip>Primary fish</mat-chip>
    <mat-chip>Accent fish</mat-chip>
</mat-chip-list>

I need to implement <mat-chip-list> like user can only select one value instead of multiple. I tried above code but its not working for me. Please suggest changes.

CodePudding user response：

Try something like this or just delete multiple attribute at all

<mat-chip-list [multiple]="false" aria-label="Fish selection">
    <mat-chip>One fish</mat-chip>
    <mat-chip>Two fish</mat-chip>
    <mat-chip>Primary fish</mat-chip>
    <mat-chip>Accent fish</mat-chip>
</mat-chip-list>

CodePudding user response：

Add this in the TS file

formControl = new FormControl('one');

changeChip(val: string){
   this.formControl.patchValue(val)
}

<mat-chip-list aria-label="Fish selection" multiple="false" [formControl]="formControl">
   <mat-chip value="one" (click)="changeChip('one')">One fish</mat-chip>
   <mat-chip value="two" (click)="changeChip('two')">Two fish</mat-chip>
   <mat-chip value="three" (click)="changeChip('three')">Primary fish</mat-chip>
   <mat-chip value="four" (click)="changeChip('four')">Boo fish</mat-chip>
</mat-chip-list>