How to check default first radio button in angular material

Issue

Trying to checked the first radio button as default. But I do not know how to do it. If any one knows please help to find the solution.

app.component.html:

        <div class="input">
        <mat-radio-group class="radio-group">
        <mat-radio-button
          class="radio-button"
          *ngFor="let bus of buses"
          [value]="bus"
         >
          {{ bus }}
        </mat-radio-button>
        </mat-radio-group>
        </div>

Demo: https://stackblitz.com/edit/angular-8-material-starter-template-gzf9vu?file=src%2Fapp%2Fapp.component.html

Solution

You can add the index to *ngFor and set checked when index is equal to zero.

<div class="input">
  <mat-radio-group class="radio-group">
    <mat-radio-button
      class="radio-button"
      *ngFor="let bus of buses; index as i"
      [value]="bus"
      [checked]="i === 0"
    >
      {{ bus }}
    </mat-radio-button>
  </mat-radio-group>
</div>

Stackblitz: https://stackblitz.com/edit/angular-8-material-starter-template-njehsp?file=src/app/app.component.html

Answered By - Chris Hamilton