First click on radiobutton doesn't show value

Question

when i first time click on radio button it doesn't show value

<md-radio-group [(value)]="sex" layout="row" >
<md-radio-button value="Female" (click)="setSex(value)" >Female</md-radio-button>
<md-radio-button value="Male"  (click)="setSex(value)">Male</md-radio-button>

and i trying to get value in my class

 public sex:String;
 public vm: String;  

  setSex(sex:String)  {
      if (this.sex) { 
        this.vm = this.sex;
         console.log(this.sex)
               }
       }

Example

Answer 1

Remove the click handlers:

 <md-radio-button value="Female">Female</md-radio-button>
 <md-radio-button value="Male">Male</md-radio-button>

Either bind to a model variable or use a click handler, but both is asking for trouble.

See here: http://plnkr.co/edit/e5Ko608lNDmasZGJFV1M?p=preview

Answer 2

You can't use value as the event argument (it is undefined ). I suggest you create local template variables and then you can pass their values into the event handler:

<md-radio-button #r1 value="Female" (click)="setSex(r1.value)">Female</md-radio-button>
<md-radio-button #r2 value="Male"   (click)="setSex(r2.value)">Male</md-radio-button>

and then this will work as desired:

setSex(sex:String)  {
   console.log(sex);
   ...
}