Set Default Radio Button Checked in Angular 16

In Angular 16, you can set the default radio button checked by using the [checked] attribute.

For example:

Male
Female

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 16 projects.

How to Set Default Radio Button Checked in Angular 16

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

  • Step 1: Create a new Angular component
  • Step 2: Define the radio button options in the component
  • Step 3: Create the template for the component
  • Step 4: Adding the FormsModule
  • Step 5: Display the component in your app
  • Step 6: Set the default checked radio button

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 16 projects.

Recommended Tutorials

Jaspreet Singh Ghuman

Jaspreet Singh Ghuman

Jassweb.com/

Passionate Professional Blogger, Freelancer, WordPress Enthusiast, Digital Marketer, Web Developer, Server Operator, Networking Expert. Empowering online presence with diverse skills.

jassweb logo

Jassweb always keeps its services up-to-date with the latest trends in the market, providing its customers all over the world with high-end and easily extensible internet, intranet, and extranet products.

Contact
San Vito Al Tagliamento 33078
Pordenone Italy
Item added to cart.
0 items - 0.00
Open chat
Scan the code
Hello 👋
Can we help you?