How to Get Selected Radio Button Value in Angular 17,16

To get the selected radio button value in angular; There are two options to get checked the radio button value, first while changing radio button event and while submitting the form in angular 17,16 projects.

How to Get Selected Radio Button Value in Angular 17,16

Steps to get the selected radio buttons value in Angular 17,16 on submit form and onChange event:

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

Here are two methods using which you can get the values of checked and selected radio buttons.

Simply open radio-button.component.ts file and use following code in it to get selected radio button values in angular:

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

We hope that you have learned both the methods from this tutorial guide, using which you can get selected radio button value in Angular projects.

Recommended Tutorials