Angular 2 Radio Button 2 way Binding

user_1400915 0
Viewed 5749

I have 3 radio buttons as follows:

.html:

<input type="radio" name = "options" value="All" [checked]='selectedRadioButtonValue' (input)='selectedRadioButtonValue=$event.target.value' />
<span class="radioClass">{{"All("+all+")"}}</span>

<input type="radio" name = "options" value="Male" [checked]='selectedRadioButtonValue' (input)='selectedRadioButtonValue=$event.target.value' />
<span class="radioClass">{{"Male("+male+")"}}</span>

<input type="radio" name = "options" value="Female" [checked]='selectedRadioButtonValue' (input)='selectedRadioButtonValue=$event.target.value' />
<span class="radioClass">{{"Female("+female+")"}}</span>

I dont want to use [(ngModel)] because of package issues .

I want to use [] and () traditional ways .

Now, the thing is values are not getting changed in the selectedRadioButtonValue . Whats the issue here?

export class EmployeeComponent {

selectedRadioButtonValue: string = "All";

}
angular jquery javascript
2 Answers

For two way data binding its as same as all others use this syntax [(ngModel)]

<div class="form-group">
<label>Gender:</label> 
&nbsp;

<label class="radio-inline">
    <input type="radio" name="optradio" value='Male' [(ngModel)]="employee.gender" >Male
</label>

<label class="radio-inline">
    <input type="radio" name="optradio" value='Female' [(ngModel)]="employee.gender" >Female
</label>

user_58707110

without ngModel Demo :

using change event binding and the value of checked attribute must be a boolean not a string because strings are truthy :

<input type="radio" name = "options" value="All" [checked]="selectedRadioButtonValue === 'All'" (change)='selectedRadioButtonValue=$event.target.value' />
<span class="radioClass">{{"All("+all+")"}}</span>

<input type="radio" name = "options" value="Male" [checked]="selectedRadioButtonValue === 'Male' " (change)='selectedRadioButtonValue=$event.target.value' />
<span class="radioClass">{{"Male("+male+")"}}</span>

<input type="radio" name = "options" value="Female" [checked]="selectedRadioButtonValue === 'Female'" (change)='selectedRadioButtonValue=$event.target.value' />
<span class="radioClass">{{"Female("+female+")"}}</span>
user_54864940
Related