How to unselect an Angular Material list-option in a selection-list with single selection?

Question

I am a beginner in Angular/Angular Material and I have the following problem. I have a template with a selection-list with single selection and a few options:

<mat-selection-list [multiple]="false">
  <mat-list-option>Option 1</mat-list-option>
  <mat-list-option>Option 2</mat-list-option>
  <mat-list-option>Option 3</mat-list-option>
</mat-selection-list>

The normal behavior of that list is that an option is selected when you click on it, and only one option can be selected at a time. However, I would like to add the behavior that the option be "unselected" when you click on it again (as it is presented in the docs). I have fiddled around with MatSelectionList, MatSelectionListChange, and @ViewChild(), trying to emulate the solutions proposed here and here, but to no avail so far. My question is then whether it is doable for these components? (And any solution would be very welcome of course :)) Or is it not worth trying to change the behavior of the componenents, and maybe rather start from scratch, or try bootstrap? Thanks a lot!

Wolfound · Accepted Answer · 2021-10-15 13:47:22Z

2

As you can see in the Angular Material doc (https://material.angular.io/components/list/api), mat-list-option has the selected property.

So you could play with it. When an option is click (you can add a event on each option to catch the event) then you change the selected property.

Ex :

const options = [{
    label: 'Option 1',
    selected: false
  },
  {
    label: 'Option 2',
    selected: false
  }
]

optionWasClicked(optionClicked) {
  this.options.forEach((option) => option.selected = (optionClicked == option) ? true : false)
}

<mat-selection-list *ngFor="let option of options" [multiple]="false">
  <mat-list-option (click)="optionWasClicked(option)">{{ option.label }}</mat-list-option>
</mat-selection-list>

answered Oct 15, 2021 at 13:47

Wolfound

1059 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

olivier Over a year ago

thanks a lot! that was clear and easy :)

Collectives™ on Stack Overflow

How to unselect an Angular Material list-option in a selection-list with single selection?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related