I wanted to remove the toggling affect from <mat-chip-option>
. When I click on "Accent fish" chip (video here) it should get selected as shown in the video but when I click it again it should remain selected. And when I click on some other chip, "Accent fish" chip should get deselected and the one I am clicking should get selected.
As per my research, angular adds mat-mdc-chip-selected mdc-evolution-chip--selected
css classes when I click on any chip the very first time and removes these classes when I click it again. Somehow I am unable to get to the functionality I am looking for.
I am basically using these chips as filters which means that if user clicks on my filter two times, it should remain selected.
You can achieve it using the selectionChange
event of the chip option. There we access the chip through source
and select it again, if it's an unselected event by checking !event.selected
.
selection(event: MatChipSelectionChange) {
console.log(event);
if (!event.selected) {
event.source.select();
}
}
import { Component } from '@angular/core';
import {
MatChipSelectionChange,
MatChipsModule,
} from '@angular/material/chips';
/**
* @title Basic chips
*/
@Component({
selector: 'chips-overview-example',
templateUrl: 'chips-overview-example.html',
standalone: true,
imports: [MatChipsModule],
})
export class ChipsOverviewExample {
selection(event: MatChipSelectionChange) {
console.log(event);
if (!event.selected) {
event.source.select();
}
}
}
<mat-chip-listbox aria-label="Fish selection">
<mat-chip-option (selectionChange)="selection($event)"
>One fish</mat-chip-option
>
<mat-chip-option (selectionChange)="selection($event)"
>Two fish</mat-chip-option
>
<mat-chip-option (selectionChange)="selection($event)" color="accent" selected
>Accent fish</mat-chip-option
>
<mat-chip-option (selectionChange)="selection($event)" color="warn"
>Warn fish</mat-chip-option
>
</mat-chip-listbox>