Angular Material reset button-toggle-group

Question

What is the correct way to reset the value of a mat-button-toggle-group? I have a scenario where a mat-button-toggle is selected, then a subsequent action deselects it. My problem is that when the groups value is reset, the UI doesn't update to match.

Currently, I reset the group by setting the value of the mat-button-toggle-group to null (or undefined). This works, but the UI doesn't update to match. I thought about adding an invisible mat-button, and giving it a value of "unselected" or something like that. Seems like there should be a better way.

This stackblitz is a simple demonstration: https://stackblitz.com/edit/angular-wgsubv

Try selecting foo or bar then hit the reset button. the groups value changes, but the option appears to be selected still. If a user needs to select that same button again, they must click twice.

Unfortunately, I've already tried that. Added a bit to the stackblitz to show that as well. — Charlie Elverson
– Charlie Elverson, Commented Oct 1, 2018 at 23:50
Using [checked]="model == 'foo'" with a condition, it works. Only way I've found it. Check this stackblitz.com/edit/… — The.Bear
– The.Bear, Commented Oct 2, 2018 at 2:40

RecursiveRich · Accepted Answer · 2019-08-15 23:39:59Z

0

As far as I can tell, there is no API for this. I had to use a private property like this:

this.buttonGroup._buttonToggles.map( btn => btn.checked = false );

UPDATE: I asked this question in https://gitter.im/angular/material2 and it turns out if you remove [(ngModel)] you can simply do this: this.buttonGroup.value = ''

edited Aug 15, 2019 at 23:39

answered Aug 15, 2019 at 21:34

RecursiveRich

11 bronze badge

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

Collectives™ on Stack Overflow

Angular Material reset button-toggle-group

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related