Set Default Radio Button Checked in Angular 16

Set Default Radio Button Checked in Angular 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 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

AuthorAdmin

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

Your email address will not be published. Required fields are marked *