How to Get Selected Radio Button Value in Angular 16

If you submit a form, that time you need to get the value of selected radio button. And, when you click on the radio button, at that time onChange event has to get the value of selected radio button. So it’s very simple in angular.

In this tutorial, you will learn how to get the selected radio button value while submitting the form or occur on change event in Angular 16 projects.

Angular 16 Get Selected Radio Button Value Example

Steps to get the selected radio button value in Angular 16 on submit form and onChange event, you can follow the steps outlined below:

• Step 1: Create a new Angular Project
• Step 2: Create a Radio Button Component
• Step 3: Implement the Radio Button Component Template and Logic
• Step 4: Update the Component Class
  

• Step 5: Include the Radio Button Component in the App Module
• Step 6: Add the Radio Button Component to the App Component Template
• Step 7: Run the Application

Step 1: Create a new Angular Project

Firstly, Open your cmd (command prompt) and execute the following command to install and create a new Angular project into your system:

ng new radio-button-demo

Step 2: Create a Radio Button Component

Now, you need to create radio button components in your angular project. So open cmd and execute the following command for that:

ng generate component radio-button

Step 3: Implement the Radio Button Component Template and Logic

Next, Open the file radio-button.component.html and add the following code:

<h2>Radio Button Demo - Tutsmake.com</h2>

<form (ngSubmit)="onFormSubmit()">
  <div *ngFor="let option of options">
    <label>
      <input
        type="radio"
        name="selectedOption"
        [value]="option.value"
        [(ngModel)]="selectedOption"
        (change)="onRadioButtonChange()"
      />
      {{ option.label }}
    </label>
    <br />
  </div>
  <br />
  <button type="submit">Submit</button>
</form>

<div *ngIf="selectedOption !== null">
  <h3>Selected Option:</h3>
  <p>{{ selectedOption }}</p>
</div>

Step 4: Update the Component Class

Next, you need to update the components class. So, Open the file radio-button.component.ts and add the following code:

import { Component } from '@angular/core';

interface Option {
  label: string;
  value: string;
}

@Component({
  selector: 'app-radio-button',
  templateUrl: './radio-button.component.html',
  styleUrls: ['./radio-button.component.css'],
})
export class RadioButtonComponent {
  options: Option[] = [
    { label: 'Option 1', value: 'option1' },
    { label: 'Option 2', value: 'option2' },
    { label: 'Option 3', value: 'option3' },
  ];

  selectedOption: string | null = null;

  onFormSubmit() {
    console.log('Selected Option on Form Submit:', this.selectedOption);
    // Add your form submission logic here (if needed).
  }

  onRadioButtonChange() {
    console.log('Selected Option on Change:', this.selectedOption);
    // Add your onChange event handling logic here (if needed).
  }
}

Step 5: Include the Radio Button Component in the App Module

Then Open the file app.module.ts and import the RadioButtonComponent. Add the component to the declarations and imports sections of the module, as shown below:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // Don't forget to import FormsModule!

import { AppComponent } from './app.component';
import { RadioButtonComponent } from './radio-button/radio-button.component'; // Import the RadioButtonComponent

@NgModule({
  declarations: [AppComponent, RadioButtonComponent], // Add RadioButtonComponent to declarations
  imports: [BrowserModule, FormsModule], // Include FormsModule in imports
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Step 6: Add the Radio Button Component to the App Component Template

Next, Open the file app.component.html and include the <app-radio-button> tag in it:

<div style="text-align: center;">
  <app-radio-button></app-radio-button>
</div>

Step 7: Run the Application

Finally, execute the following command on cmd to start your Angular application:

ng serve

Navigate to http://localhost:4200/ in your web browser, and you should see the Radio Button Demo with three options. When you select a radio button and click the “Submit” button, you’ll see the selected option displayed below the radio buttons.

Conclusion

Congratulations! You’ve successfully learned on how to get the selected radio button value in Angular 16 projects on form submit and the OnChange event. Feel free to customize this code to fit your specific use case and build amazing Angular applications!

Recommended Tutorials