Angular Radio Button Change Event Example

This post is focused on how to call radio button change event in angular. We will look at example of angular radio button on change event example. In this article, we will implement a angular radio button change event example. you can understand a concept of angular 4 radio button click event.

You can easily get radio button selected value on change event in angular 6, angular 7, angular 8 and angular 9.

Here, i will give you very simple example to getting selected radio button value by change event with reactive form. here we will take gender radio button with Male and Female radio button and if you select anyone then it will by print console selected value on change event. we created changeGender() that will call on change of radio button value. so let's see app.component.html and app.component.ts file bellow.

So, let's see example

src/app/app.component.html

<div class="container">
    <h1>Angular Radio Button Example - HDTuto.com</h1>
       
    <form [formGroup]="form" (ngSubmit)="submit()">
           
        <div class="form-group">
            <label for="gender">Gender:</label>
            <div>
              <input id="male" 
                        type="radio" 
                        value="male" 
                        name="gender" 
                        formControlName="gender" 
                        (change)="changeGender($event)">
              <label for="male">Male</label>
           </div>
   
           <div>
              <input id="female" 
                        type="radio" 
                        value="female" 
                        name="gender" 
                        formControlName="gender" 
                        (change)="changeGender($event)">
              <label for="female">Female</label>
           </div>
              
            <div *ngIf="f.gender.touched && f.gender.invalid" class="alert alert-danger">
                <div *ngIf="f.gender.errors.required">Name is required.</div>
            </div>
        </div>
        
        <button class="btn btn-primary" type="submit" [disabled]="!form.valid">Submit</button>
    </form>
</div>

src/app/app.component.ts

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';
   
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
   
  form = new FormGroup({
    gender: new FormControl('', Validators.required)
  });
   
  get f(){
    return this.form.controls;
  }
   
  submit(){
    console.log(this.form.value);
  }
 
  changeGender(e) {
    console.log(e.target.value);
  }
   
}

Output:

Male

I hope it can help you...