Angular 2 unselect md-button-toggle of md-button-toggle-group

Question

So, here is my problem. I need to be programmatically able to unselect any selected md-button-toggle inside my md-button-toggle-group. The goal is, when the md-button-toggle-group is hidden and then reshow, it shouldn't have any selected md-button-toggle anymore ; currently, it is keeping a track of what was selected before it went hidden. Unfortunately, none of my tries gave a positive result.

I specifically need to use these graphical components, and I can't modify the expected behaviour.

What did I try :

• to bind checked property of md-button-toggleto a boolean and set it programmatically to false / true whenever I need to select / unselect it. Doesn't work.

• to empty md-button-toggle-group selected attribute : I access it by using a ViewChild() on it, then set myViewChild.selected to null. Doesn't work.

• to set directly checked attribute of the button to true / false, accessing it by a ViewChild. Doesn't work either.

• to set ViewChild attribute value to null. Doesn't work.

• same as previous, but then call _updateSelectedButtonToggleFromValue(). Looks like it would have been good, but this is a private method so I can't access it.

Here is my html

<md-button-toggle-group #toggleGroup="mdButtonToggleGroup">
    <md-button-toggle value="btnBorderColor">
        <md-icon [style.color]=toolbarBorderColor.selectedOption.value>border_color</md-icon>
    </md-button-toggle>
    <md-button-toggle value="btnDelete"  [(checked)]="delChecked" (click)="doAction(actionsList.Delete)" #deleteBtn>
        <md-icon>delete</md-icon>
    </md-button-toggle>
</md-button-toggle-group>

And my ts

@ViewChild('toggleGroup')
public toggleGroup: MdButtonToggleGroup;

@ViewChild('deleteBtn')
public toggleDelete: MdButtonToggle;

[...]

public doAction(action: ActionsEnum): void {
    if (action === ActionsEnum.Delete) {
        this.delChecked = false; // doesn't work
        this.toggleGroup.value = null;
        this.toggleGroup.selected = null;
     // this.toggleGroup._updateSelectedButtonToggleFromValue();
        this.toggleDelete.checked = false;
    }
    this.onActionClick.emit(action);
}

I am kinda stuck and any help would be really appreciated.

Some of the solutions presented technically work, but the animation is awful. The 'ripple' suggests a selection, and when you get an action with a ripple effect that results in a deselection it just looks bad. Just be cautious of this when selecting a solution, and mindful of how often someone will actually be deselecting something. — Simon_Weaver
– Simon_Weaver, Commented Oct 19, 2018 at 21:06

Adrian Claudiu Dima · Accepted Answer · 2017-08-23 16:49:28Z

5

I encountered the same problem using Angular ^4.0.0.

I was not able to access the toggle group using :

@ViewChild('toggleGroup')
public toggleGroup: MdButtonToggleGroup;

In order to have the toggle group available in component I had to use:

@ViewChild(MdButtonToggleGroup)
public toggleGroup: MdButtonToggleGroup;

Once this was available in my component the next thing came in. For some unknown reason, the reset doesn't work if the "selected" item has some certain custom css applied. (<md-button-toggle). All I had to do to make it work, was to set this.mdToggleButtonGroup.selected = null; Doing so, it would remove the state of selected.

Check this plunker example: https://plnkr.co/edit/TGsonTD4x2yCtvHCVx9E?p=preview

answered Aug 23, 2017 at 16:49

Adrian Claudiu Dima

4595 silver badges9 bronze badges

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

2 Comments

Mozgor Over a year ago

Your solution looks working in your plunker, but sadly it doesn't for me : I was able to access the toggle group, it was available, and I could see its property selected was correctly set to null. Anyway I found a workaround since March, using objects to store which toggle is selected for each toolbar (because I have several potentially overlapping). Thanks for the shot thought :)

Adrian Claudiu Dima Over a year ago

Glad it helped. My problem was . that I had inside a <md-button-toggle-group> a <md-nav-list> which contained the <md-button-toggle> . This was problematic and the provided solution wouldn't work. Once the <md-button-toggle> was removed from <md-nav-list>, everything worked fine.

Collectives™ on Stack Overflow

Angular 2 unselect md-button-toggle of md-button-toggle-group

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related