In Angular 16, you can set the default radio button checked by using the [checked] attribute.
For example:
Male
Female
[ad_1]
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
[ad_2]