AngularJS provides ngModel to bind values to input fields. Binding radio buttons to scope variables is tricky.
Source Code           DEMO


Here gender is the common variable which was bound to both radio button. On click of below buttons, gender value changes respectively.   
<button (click)="gender = 'male'">Select Male</button>
<button (click)="gender = 'female'" >Select Female</button>

<input type="radio" [(ngModel)]="gender" value="male" name="gender"/> Male<br>
<input type="radio" [(ngModel)]="gender" value="female" name="gender"/> Female<br>

Script - app.component.ts

Here we initiate only gender variable
export class AppComponent {
  gender: string = 'male';

Script - app.module.ts

In order to use ngModel, we should import FormsModule into our app module
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { FormsModule }   from '@angular/forms';

  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent],
  bootstrap:    [ AppComponent ]
export class AppModule { }



Follow this blog by Email

Popular Posts