Angular 10 : radio-button Example

Angular 10 : radio-button Example

<mat-radio-button> provides the same functionality as a native <input type="radio"> enhanced with Material Design styling and animations.

All radio-buttons with the same name comprise a set from which only one may be selected at a time.

HTML:

<label id="example-radio-group-label">Pick your favorite season</label>
<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">
    {{season}}
  </mat-radio-button>
</mat-radio-group>
<div>Your favorite season is: {{favoriteSeason}}</div>

JavaScript/TS:

<label id="example-radio-group-label">Pick your favorite season</label>
<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">
    {{season}}
  </mat-radio-button>
</mat-radio-group>
<div>Your favorite season is: {{favoriteSeason}}</div>