template: `
<label *ngFor="let item of radioItems">
<input type="radio" name="options" (click)="model.options = item"
[checked]="item === model.options">
\{\{item}}
</label>`


class App {
radioItems = 'one two three'.split(' ');
model      = { options: 'two' };
}

<button (click)="model.options = 'one'">set one</button>

<input type="radio" name="options" #male (click)="onChange(male.value)">Male
<input type="radio" name="options" #female (click)="onChange(female.value)">Female

<input name="toRent" type="radio" (click)="setToRentControl(false)">
<input name="toRent" type="radio" (click)="setToRentControl(true)">


setToRentControl(value){
this.vm.toRent.updateValue(value);
alert(value); //true/false
}

import {Component} from "@angular/core";
import {FORM_DIRECTIVES} from "@angular/common";
import {RadioControlValueAccessor} from "./radio_value_accessor";
import {bootstrap} from '@angular/platform-browser-dynamic';


@Component({
selector: "my-app",
templateUrl: "template.html",
directives: [FORM_DIRECTIVES, RadioControlValueAccessor]
})
export class App {


model;


constructor() {
this.model = {
sex: "female"
};
}
}

<div>
<form action="">
<input type="radio" [(ngModel)]="model.sex"  name="sex" value="male">Male<br>
<input type="radio" [(ngModel)]="model.sex"  name="sex" value="female">Female
</form>


<input type="button" value="select male" (click)="model.sex='male'">
<input type="button" value="select female" (click)="model.sex='female'">
<div>Selected Radio: \{\{model.sex}}</div>
</div>

import {Directive, Renderer, ElementRef, forwardRef} from '@angular/core';
import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/common';


export const RADIO_VALUE_ACCESSOR: any = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => RadioControlValueAccessor),
multi: true
};


@Directive({
selector:
'input[type=radio][ngControl],input[type=radio][ngFormControl],input[type=radio][ngModel]',
host: {'(change)': 'onChange($event.target.value)', '(blur)': 'onTouched()'},
bindings: [RADIO_VALUE_ACCESSOR]
})
export class RadioControlValueAccessor implements ControlValueAccessor {
onChange = (_) => {};
onTouched = () => {};


constructor(private _renderer: Renderer, private _elementRef: ElementRef) {}


writeValue(value: any): void {
this._renderer.setElementProperty(this._elementRef.nativeElement, 'checked', value == this._elementRef.nativeElement.value);
}
registerOnChange(fn: (_: any) => {}): void { this.onChange = fn; }
registerOnTouched(fn: () => {}): void { this.onTouched = fn; }
}

<ul>
<li *ngFor="let p of price"><input type="radio" name="price"      (click)="getValue(price.value)" value="\{\{p}}" #price> \{\{p}}
</li>
</ul>

export class App {


price:string;


price = ["1000", "2000", "3000"];


constructor() {   }


model = new SomeData(this.price);


getValue(price){
this.model.price = price;
}
}

...
import { AppComponent } from './app/app.component';
import { disableDeprecatedForms, provideForms } from '@angular/forms';


bootstrap(AppComponent, [
disableDeprecatedForms(),
provideForms(),
appRouterProviders
]);

<form action="">
<input type="radio" [(ngModel)]="buildTool" name="buildTool" value="gradle">Gradle <br>
<input type="radio" [(ngModel)]="buildTool" name="buildTool" value="maven">Maven
</form>

<input name="options" ng-control="options" type="radio" [value]="1"  [(ngModel)]="model.options" ><br/>


<input name="options" ng-control="options" type="radio" [value]="2" [(ngModel)]="model.options" ><br/>

<input name="options" type="radio" [(ngModel)]="model.options" [value]="1"
[checked]="model.options==1" /><br/>
<input name="options" type="radio"  [(ngModel)]="model.options" [value]="2"
[checked]="model.options==2" /><br/>

<tr *ngFor="let entry of entries">
<td>\{\{ entry.description }}</td>
<td>
<input type="radio" name="radiogroup"
[value]="entry.id"
(change)="onSelectionChange(entry)">
</td>
</tr>

<label *ngFor="let item of items">
<input type="radio" formControlName="options" [value]="item">
\{\{item}}
</label>`

<input type="radio"
[checked]="maleRadioButtonModel.selected"
(click)="radioButtonGroupList.selectButton(maleRadioButtonModel)"

 <input type="radio"
[checked]="femaleRadioButtonModel.selected"
(click)="radioButtonGroupList.selectButton(femaleRadioButtonModel)"

 import {UIButtonControlModel} from "./ui-button-control.model";




export class UIRadioButtonGroupListModel {


private readonly buttonList : UIButtonControlModel[];
private readonly debugName : string;




constructor(buttonList : UIButtonControlModel[], debugName : string) {


this.buttonList = buttonList;
this.debugName = debugName;


if (this.buttonList == null) {
throw new Error("null buttonList");
}


if (this.buttonList.length < 2) {
throw new Error("buttonList has less than 2 elements")
}
}






public selectButton(buttonToSelect : UIButtonControlModel) : void {


let foundButton : boolean = false;
for(let i = 0; i < this.buttonList.length; i++) {
let oneButton : UIButtonControlModel = this.buttonList[i];
if (oneButton === buttonToSelect) {
oneButton.selected = true;
foundButton = true;
} else {
oneButton.selected = false;
}


}


if (! foundButton) {
throw new Error("button not found in buttonList");
}
}
}

<select formControlName="gender" name="gender" class="">
<option value="M">Male</option>
<option value="F">Female</option>
</select>

<form name="form" (ngSubmit)="">
<div *ngFor="let item of options">
<input [(ngModel)]="model.option_id" type="radio" name="options" [value]="item.id"> &nbsp; \{\{ item.name }}
</div>
</form>

 [checked]="model.options==2"

       <input type="radio" id="byAllRadioButton"
name="findByRadioButtonGroup"
[(ngModel)]="findByRadioButtonGroup.dataBindingValue"
[value]="byAllRadioButton.MY_DATA_BINDING_VALUE">


<input type="radio" id="byNameRadioButton"
name="findByRadioButtonGroup"
[(ngModel)]="findByRadioButtonGroup.dataBindingValue"
[value]="byNameRadioButton.MY_DATA_BINDING_VALUE">

 findByRadioButtonGroup : UIRadioButtonGroupModel
= new UIRadioButtonGroupModel("findByRadioButtonGroup",
"byAllRadioButton_value",
(groupValue : any) => this.handleCriteriaRadioButtonChange(groupValue)
);


byAllRadioButton : UIRadioButtonControlModel
= new UIRadioButtonControlModel("byAllRadioButton",
"byAllRadioButton_value",
this.findByRadioButtonGroup) ;


byNameRadioButton : UIRadioButtonControlModel
= new UIRadioButtonControlModel("byNameRadioButton",
"byNameRadioButton_value",
this.findByRadioButtonGroup) ;






private handleCriteriaRadioButtonChange = (groupValue : any) : void => {


if ( this.byAllRadioButton.selected ) {


// Do something


} else if ( this.byNameRadioButton.selected ) {


// Do something


} else {
throw new Error("No expected radio button selected");
}
};

export class UIRadioButtonGroupModel {




private _dataBindingValue : any;




constructor(private readonly debugName : string,
private readonly initialDataBindingValue : any = null,   // Can be null or unspecified
private readonly notifyOfChangeHandler : Function = null       // Can be null or unspecified
) {


this._dataBindingValue = initialDataBindingValue;
}




public get dataBindingValue() : any {


return this._dataBindingValue;
}




public set dataBindingValue(val : any) {


this._dataBindingValue = val;
if (this.notifyOfChangeHandler != null) {
MyAngularUtils.callLater(this.notifyOfChangeHandler, this._dataBindingValue);
}
}






public unselectRadioButton(valueOfOneRadioButton : any) {


//
// Warning: This method probably never or almost never should be needed.
// Setting the selected radio button to unselected probably should be avoided, since
// the result will be that no radio button will be selected.  That is
// typically not how radio buttons work.  But we allow it here.
// Be careful in its use.
//


if (valueOfOneRadioButton == this._dataBindingValue) {
console.warn("Setting radio button group value to null");
this.dataBindingValue = null;
}
}


};

export class UIRadioButtonControlModel {




public enabled : boolean = true;
public visible : boolean = true;




constructor(public readonly debugName : string,
public readonly MY_DATA_BINDING_VALUE : any,
private readonly group : UIRadioButtonGroupModel,
) {


}




public get selected() : boolean {


return (this.group.dataBindingValue == this.MY_DATA_BINDING_VALUE);
}




public set selected(doSelectMe : boolean) {


if (doSelectMe) {
this.group.dataBindingValue = this.MY_DATA_BINDING_VALUE;
} else {
this.group.unselectRadioButton(this.MY_DATA_BINDING_VALUE);
}
}


}

    [
{
"moduleId": 1,
"moduleName": "Employee",
"subModules":[
{
"subModuleId": 1,
"subModuleName": "Add Employee",
"selectedRightType": 1,
},{
"subModuleId": 2,
"subModuleName": "Update Employee",
"selectedRightType": 2,
},{
"subModuleId": 3,
"subModuleName": "Delete Employee",
"selectedRightType": 3,
}
]
},
{
"moduleId": 2,
"moduleName": "Company",
"subModules":[
{
"subModuleId": 4,
"subModuleName": "Add Company",
"selectedRightType": 1,
},{
"subModuleId": 5,
"subModuleName": "Update Company",
"selectedRightType": 2,
},{
"subModuleId": 6,
"subModuleName": "Delete Company",
"selectedRightType": 3,
}
]
},
{
"moduleId": 3,
"moduleName": "Tasks",
"subModules":[
{
"subModuleId": 7,
"subModuleName": "Add Task",
"selectedRightType": 1,
},{
"subModuleId": 8,
"subModuleName": "Update Task",
"selectedRightType": 2,
},{
"subModuleId": 9,
"subModuleName": "Delete Task",
"selectedRightType": 3,
}
]
}
]

        <div *ngFor="let module of modules_object">
<div>\{\{module.moduleName}}</div>
<table width="100%">


<thead>
<tr>
<th>Submodule</th>
<th>
<input type="radio" name="\{\{module.moduleName}}_head_radio" [(ngModel)]="module.selHeader" (change)="selAllColumn(module)" [value]="1"> Read Only
</th>
<th>
<input type="radio" name="\{\{module.moduleName}}_head_radio" [(ngModel)]="module.selHeader" (change)="selAllColumn(module)" [value]="2"> Read Write
</th>
<th>
<input type="radio" name="\{\{module.moduleName}}_head_radio" [(ngModel)]="module.selHeader" (change)="selAllColumn(module)" [value]="3"> No Access
</th>
</tr>
</thead>


<tbody>
<tr *ngFor="let sm of module.subModules">
<td>\{\{sm.subModuleName}}</td>
<td>
<input type="radio" [checked]="sm.selectedRightType == '1'" [(ngModel)]="sm.selectedRightType" name="\{\{sm.subModuleId}}_radio" [value]="1">
</td>
<td class="cl-left">
<input type="radio" [checked]="sm.selectedRightType == '2'" [(ngModel)]="sm.selectedRightType" name="\{\{sm.subModuleId}}_radio" [value]="2">
</td>
<td class="cl-left">
<input type="radio" [checked]="sm.selectedRightType == '3'" [(ngModel)]="sm.selectedRightType" name="\{\{sm.subModuleId}}_radio" [value]="3">
</td>
</tr>
</tbody>
</table>
</div>

<label class="radio-inline">
<input class="form-check-input" type="radio" [(ngModel)]="dog" name="cat"  checked (change)="onItemChange($event)" value="Dog" />Dog</label>
<label class="radio-inline">
<input class="form-check-input" type="radio" [(ngModel)]="cat" name="cat"   (change)="onItemChange($event)" value="Cat"  />Cat</label>