Angular Radio Button On Change Event Example

This tutorial will provide example of angular radio button change event example. you can see angular 4 radio button click event. you will learn angular radio button selected event. we will help you to give example of how to call radio button change event in angular. You just need to some step to done angular radio button on change event example.

You can easily get radio button selected value on change event in angular 6, angular 7, angular 8, angular 9, angular 10, angular 11, angular 12, angular 13, angular 14, angular 15, angular 16 and angular 17.

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 - ItSolutionStuff.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...