Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

angular material 2 button toggle by default selected

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>
like image 453
Otani Shuzo Avatar asked Mar 18 '17 08:03

Otani Shuzo


2 Answers

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>
like image 128
Quinnland23 Avatar answered Dec 04 '22 03:12

Quinnland23


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>
like image 28
Martin Varga Avatar answered Dec 04 '22 03:12

Martin Varga