I don't want to user a variable in the component, only user reference variables in HTML. Here is the code:
<fieldset id="group1">
<input type="radio" value="value1" name="group1" [checked]="true" #list>List
<input type="radio" value="value2" name="group1" #map>Map
</fieldset>
{{list.checked}}
When I launched the code, list.checked = return true. When I click on the second radio button, list.checked is supposed to now return false but it's not the case.
How to make it work?
Thanks
I think this question + answer explains why Angular acts this way Angular2 Template Reference Variables and dynamic updating)
In short he says:
With <input #myInput type="text" value="yeh" /> you create a local template reference to DOM element, however it doesn't mean Angular watches it's value or any other arbitrary property, like checked, etc.
So that's why the answer above from pc_coder works because ngModel forces Angular to watch the html element.
Demo You need to use value bind and give true false to them. Then with ngModel two way binding you assign it to variable. In component initialize it as true.
<fieldset id="group1">
<input type="radio" value="value1" name="group1"[(ngModel)]="data" [value]="true" #list>List
<input type="radio" value="value2" name="group1"[(ngModel)]="data"[value]="false" #map>Map
</fieldset>
{{list.checked}}
