angularangular-materialangular-material2angular17mat-chip

How to remove toggling from <mat-chip-option>


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.

enter image description herehttps://v16.material.angular.io/components/chips/examples


Solution

  • 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();
      }
    }
    

    Full Code:

    TS:

    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();
          }
        }
    }
    

    HTML:

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

    Stackblitz Demo