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 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 >
    <h1>Angular Radio Button Example - ItSolutionStuff.com</h1>
    <form [formGroup]="form" (ngSubmit)="submit()">
        <div >
            <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" >
                <div *ngIf="f.gender.errors.required">Name is required.</div>
            </div>
        </div>
        <button  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…