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

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 :

    
        
            {{category.name}}
        
    

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.