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

Markup

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';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

0 comments:

Blogroll

Follow this blog by Email

Popular Posts