Why doesn't the radiobutton fire right away?

Question

Angular

Good day
For some reason, clicking on the radiobutton does not work immediately. Visually displayed, but not displayed in the console on the first click

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

and code

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

Here is an example . on the first click, console.log doesn't fire. What did I miss?

Answer 1

Firstly, you have Male and Female mixed up, and secondly, you don’t pass a value through setSex (value), and this.sex displays not what is passed to the function, but what is public sex: String. I can suggest replacing setSex(value) with setSex('Female') and sexSex('Male') respectively and replacing this.sex with sex. In other words - plnkr.co/edit/6V40MXjN4vzCPnZKl26S?p=preview