angular material 2 button toggle by default selected

Question

in angular material 2, How can I set default selected button in toggle group.

It does toggle once I tap one, but both selected by default somehow. I tried as follows, but doesn't work.

  <md-button-toggle-group #group="mdButtonToggleGroup">
    <md-button-toggle (click)="firstTapped()" selected>
      <span>one</span>
    </md-button-toggle>
    <md-button-toggle (click)="secondTapped()">
      <span>second</span>
    </md-button-toggle>
  </md-button-toggle-group>

Quinnland23 · Accepted Answer · 2017-05-05 20:51:25Z

23

You need to assign each button a value and then you can give the group an initial value (matching one of the buttons);

<md-button-toggle-group #group="mdButtonToggleGroup" value="button1">
    <md-button-toggle value="button1">
      <span>one</span>
    </md-button-toggle>
    <md-button-toggle value="button2">
      <span>second</span>
    </md-button-toggle>
  </md-button-toggle-group>

answered May 5, 2017 at 20:51

Quinnland23

5061 gold badge3 silver badges10 bronze badges

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

Comments

Martin Varga · Accepted Answer · 2017-03-27 11:59:28Z

8

I'm just beginner in material but this should work. You can use ngModel with variable that can have two values "one", "two". Than you can observe changes using "yourFunction".

<md-button-toggle-group (ngModelChange)="yourFunction($event)" [ngModel]="selected">
 <md-button-toggle value="one">
  <span>one</span>
 </md-button-toggle>
 <md-button-toggle value="two">
  <span>second</span>
 </md-button-toggle>
</md-button-toggle-group>

answered Mar 27, 2017 at 11:59

Martin Varga

1052 silver badges7 bronze badges

Comments

Igor Almeida · Accepted Answer · 2020-03-05 19:04:15Z

0

Use checked instead of selected, like:

<md-button-toggle (click)="firstTapped()" checked>

answered Mar 5, 2020 at 19:04

Igor Almeida

2242 silver badges14 bronze badges

Collectives™ on Stack Overflow

angular material 2 button toggle by default selected

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related