How do I select a mat-radio-button in Angular Material with “selected” property of mat-radio-group?

Question

I have these lines of code

<mat-radio-group color="primary"
                       (change)="systemChange($event)">
        <mat-radio-button *ngFor="let system of systems"
                          [value]="system">{{system}}</mat-radio-button>

When I look at the page none of the buttons are selected by default and I want to make 1 of them selected. InAngularMaterial docs there is a

@Input()
 selected: MatRadioButton

and I cannot understand how to use it with *ngFor cycle or is there another way of solving this problem with *ngFor .

Answer 1

You can add a [value]="systems[0]" to your code:

<mat-radio-group color="primary" 
                 [value]="sys"
                 (change)="systemChange($event)">

with sys = 'whatever' in your controller;

In this example the second radio is selected:

<mat-radio-group [value]="val" aria-label="Select an option">
    <mat-radio-button value="a">Option 1</mat-radio-button>
    <mat-radio-button value="b">Option 2</mat-radio-button>
    <mat-radio-button value="c">Option 3</mat-radio-button>
    <mat-radio-button value="d">Option 4</mat-radio-button>
</mat-radio-group>

and

export class RadioOverviewExample {
  val = 'b';
}