CODEWITHSUNDEEP
angularangular-material
Otani Shuzo
Otani Shuzo

Reputation: 1238

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>

Upvotes: 12

Views: 12119

Answers (3)

Igor Almeida
Igor Almeida

Reputation: 224

Use checked instead of selected, like:

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

Upvotes: 0

Quinnland23
Quinnland23

Reputation: 506

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>

Upvotes: 23

Martin Varga
Martin Varga

Reputation: 105

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>

Upvotes: 8

Related Questions