Angular mat-selection-list, How to make single checkbox select similar to radio button?

Question

How to make make single checkbox select from mat-selection-list. Similar to radio button which accepts one value from group of values.

Answer 1

Starting Angular Material 9.1.0, selection list supports a single selection mode. Enable it with the multiple input set to false: https://material.angular.io/components/list/api#MatSelectionList

Answer 2

In order to make single checkbox select from mat-selection-list if you are not using Angular Material v6+ here is the workaround i used : Let's say we have a list of categories checkboxes.

In your HTML :

    <mat-selection-list>
        <mat-list-option  (selectionChange)="handleSelection($event, category)" *ngFor="let category of categories" [value]="category">
            <span >{{category.name}}</span>
        </mat-list-option>
    </mat-selection-list>

In your .TS :

  handleSelection(event, categorySelected) {
      if (event.selected) {
          event.source.selectionList.options.toArray().forEach(element => {
              if (element.value.name!= categorySelected.name) {
                 element.selected = false;
              }
         });
      }
  }

The key here is to use the property selectionChange on the MatListOption and not MatSelectionList.