Radio Button Angular 2

You are probably missing the double quotes.

(change)=doSomething() should be (change)="doSomething()"

Have a look at the following plunkr in src/test-item-radio.ts:

@Component({
selector: 'test-item-radio',
template: `
 <div>
 Answer: {{ answer }}
 </div>
 <div class="radio" *ng-for="#option of itemData">
 <label>{{option.id}}
 <input type="radio" [value]="option.id"
 (change)="doSomething()" name="radio-list" [checked]='answer==option.id'>
 <span>{{ option.name }}</span>
 </label>
 </div>
`,
directives: [FORM_DIRECTIVES, NgFor],
providers: []
})
export class TestItemRadio {
@Input()
itemData;
answer: string;
constructor() {
 console.log(this.itemData);
 this.answer=2;
}
doSomething() {
 alert('hello');
}
}

http://plnkr.co/edit/F4ukpS2lExNJvb1CYwbF?p=info

change the event from (change) to (click) and include the function in double quotes "dosomething()" like below code

pass a value of radio button to differentiate from one radiobutton with another in the function like "dosomething('Bonds')"

like below code

<input type="radio" name="jobb" value="Bonds" (click)="doSomething('Bonds')">
<input type="radio" name="jobb" value="Income" (click)="doSomething('Income')">

write the function in the component class

doSomething(value:string):void {
 alert(value);
}

I think this should work

You can get radio value by passing $event.target.value as argument for doSomething function as below :

<input type="radio" name="jobb" value="Bonds" (change)="doSomething($event.target.value)">Bonds
<input type="radio" name="jobb" value="Income" (change)="doSomething($event.target.value)">Income

function in Component :

doSomething(data: any){
 console.log('Hello ' + data);
}

You can check Plunker at : https://plnkr.co/edit/MqUD0fGCUcF7brMEx1rq

• angular