Home > Enterprise >  How to check default first radio button in angular material
How to check default first radio button in angular material

Time:07-07

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 >
        <mat-radio-group >
        <mat-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/app/app.component.html

CodePudding user response:

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

<div >
  <mat-radio-group >
    <mat-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

  • Related