Setting Default Checked Value for mat-radio-button in Angular’s mat-radio-group


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.

  1. By Using checked attribute
  2. 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