Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

1.5K
Views
Angular material mat-radio-group doesn´t allow default value with ngModel

I am currently struggling with a more complex implementation using mat-radio-group. I upgraded my Angular version from 10 to 13 and now a default value in a mat-radio-group is not recognized anymore.

To keep it simple you can reproduce it with the example from Angular Material: https://material.angular.io/components/radio/examples

Use the stackblitz of "Radios with ngModel". Unfortunately I couldn´t fork it. Then try to set "Winter" as default. It won´t be checked after recompiling.

Is the only way to get around this by using the [checked] property? What did Angular change to change this behavior?

over 4 years ago · Santiago Trujillo
1 answers
Answer question

0

The checked attribute for setting the default radio button has been there all the time, from my recollection at least since Material 9.x (and possibly before).

Can you try the following:

In you TS code:

Set your favorite season selection to a constant string value:

favoriteSeason: string = 'Spring';

Then in your HTML set the checked attribute in the ngFor loop for each mat-radio-button control as follows:

[checked]="favoriteSeason == season"

So, your radio group will look as shown:

<mat-radio-group
      aria-labelledby="example-radio-group-label"
      class="example-radio-group"
      [(ngModel)]="favoriteSeason">
    <mat-radio-button
        class="example-radio-button"
        *ngFor="let season of seasons"
        [value]="season"
        [checked]="favoriteSeason == season">
        {{ season }}
    </mat-radio-button>
</mat-radio-group>

The above should give you the desired default selection.

Edit: You might have experimented with the above and found out that the checked condition isn't needed if we set the initial value in our TS code.

Try the following:

In your TS code, don't assign the binding variable. Leave it like this:

favoriteSeason: string;

Next, add the following HTML button:

<button (click)="setValue()">Press Here</button>

Now, define the button click event setValue as shown:

setValue() {
    this.favoriteSeason = 'Autumn';
}

When the above runs, there is no initial selection. When you click on the button the season will be set to 'Autumn'!

The above shows that you can set the default radio selection using either code or with the checked attribute.

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!