Search code examples
angularangular-materialradio-group

Reset Mat Radio Group's Mat Radio Buttons to default on a button click

I have a set of items to be rated using radio button. I used Mat radio group and Mat radio buttons. Like below, I have to rate games good bad or none. After applying the changes all the radio buttons should be defaulted to None. Please help me to complete this task.

Template

<ng-container *ngFor="let s of sites">
  <div class="col-sm-12 col-md-5">
    {{s}}
  </div>
  <div class="col-sm-12 col-md-7">
    <mat-radio-group>
      <mat-radio-button *ngFor="let o of options; let j=index"
        [checked]="j===0"
        [value]="o">
        {{o}}
      </mat-radio-button>
    </mat-radio-group>
  </div>
</ng-container>
<button (click)="resetRadio()">Apply Changes</button>

TypeScript code


  sites: string[] = ['Tekken', 'Street Fighter', 'DBZ'];
  options: string[] = ['None', 'Good', 'Bad'];

  resetRadio(): void {
    
  }
Solution

  • The best, easy and safe way is to use Angular template driven forms or Reactive Forms...but for your requirement you can use @ViewChildren decorator to target MatButtonGroup and set 'None' value.

    this is an example : stackblitz