Set Default Radio Button Checked in Angular 17/16

In Angular, radio buttons are used when you want to allow the user to select only one option from a group of choices. In this tutorial, you will learn how to set default radio button checked in angular 17, 16 projects.

How to Set Default Radio Button Checked in Angular 17,16

Steps to set the default radio button checked in angular projects;

Step 1: Create a new Angular component

Firstly, Open your cmd or command prompt and execute the following command into it to create a new component:

ng generate component RadioButton

Step 2: Define the radio button options in the component

Now, you need to define an array of radio button options along with a variable to hold the selected option.

So, open RadioButton.component.ts component and add the following code to it:

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

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

  selectedOption: any; // We'll use this variable to hold the selected option
}

Step 3: Create the template for the component

Next, you need to create a template that will display the radio button options with *ngFor to loop.

So, open RadioButton.component.html file and add the following code in it:

<h2>Radio Button Options: Tutsmake.com</h2>
<div *ngFor="let option of radioOptions">
  <label>
    <input type="radio" [value]="option.id" [(ngModel)]="selectedOption">
    {{ option.label }}
  </label>
</div>

Step 4: Adding the FormsModule

Next, you need to import the FormsModule in the main module of your Angular app (usually in app.module.ts). Import the following code in app.module.ts file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // Import FormsModule

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

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

Step 5: Display the component in your app

Now, you need to display the radio button. So, open app.component.html file and add the following code into it to display the RadioButtonComponent:

<app-radio-button></app-radio-button>

Step 6: Set the default checked radio button

If you want to set a default selected radio button, you can initialize the selectedOption variable in the component (RadioButton.component.ts) to one of the radio option values:

selectedOption: any = 2; // This will set "Option 2" as the default selected option

Now, when you run your Angular app, the “Option 2” radio button will be checked by default. The user can then select a different option from the radio button group.

Conclusion

That’s it! You’ve successfully learned how to set a radio button checked in Angular projects.

Recommended Tutorials