Angular Material reset button-toggle-group

3
votes

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.

1
angularangular-material
You could use two way data binding :). That should work - NoHoney_k1ll
Unfortunately, I've already tried that. Added a bit to the stackblitz to show that as well. - Charlie Elverson
Using [checked]="model == 'foo'" with a condition, it works. Only way I've found it. Check this stackblitz.com/edit/… - The.Bear

1 Answers

0
votes

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