In this amazing mat-radio-button default checked article, we will see two different ways to set default checked value for mat-radio-button in Angular.
- By Using checked attribute
- By using ngModel directive to set value programmatically
By Using checked attribute
In Angular, you can set a default checked mat-radio-button
in a mat-radio-group
by using the checked
attribute on the mat-radio-button
that you want to pre-select.
Check the following example:
<mat-radio-group>
<mat-radio-button value="option1">Option 1</mat-radio-button>
<mat-radio-button value="option2" checked>Option 2</mat-radio-button>
<mat-radio-button value="option3">Option 3</mat-radio-button>
</mat-radio-group>
In this example, the second mat-radio-button
with the value “option2” will be pre-selected because of the checked
attribute.
By using ngModel directive to set value programmatically
Alternatively, you can also set the default checked value programmatically in the component code. You can do this by setting the value of the ngModel
directive on the mat-radio-group
to the desired default value. For example:
<mat-radio-group [(ngModel)]="selectedOption">
<mat-radio-button value="option1">Option 1</mat-radio-button>
<mat-radio-button value="option2">Option 2</mat-radio-button>
<mat-radio-button value="option3">Option 3</mat-radio-button>
</mat-radio-group>
And in the component code:
export class MyComponent { selectedOption = 'option2'; // set the default value here }
In this example, the second mat-radio-button
with the value “option2” will be pre-selected because its value matches the initial value of the selectedOption
property in the component.
I hope you like the article!
Also Read