Angular Material Radio Button

The <mat-radiobutton> is used for <input type=”radio”> for enhance the material design-based styling. It provides the same functionality as the <input type=”radio”> with Angular Material Design styling and animations.

Radio-Button Label

The radio-button label is provided as the content of the <mat-radiobutton> element. If you do not want the label to appear next to the radio button, you use the area-label to specify the appropriate label.

Radio Groups

The radio-button should be placed inside the <mat-radio-group> unless the DOM structure makes that impossible (e.g., the radio button inside the table cell) impossible. Different radio buttons inside a radio group will inherit the group name.

Use with @angular/forms

<mat-radio-group> is compatible with @angular/forms and support the ReactiveFormsModule.

Accessibility

<Mat-radio-button> uses internal <input type = “radio”> to provide an accessible experience. This internal radio button receives focus and is automatically labelled the text content of <mat-radio-button> element.

Radio button groups must be given a meaningful label through an area-label or area-labelledby.

Default Color Configuration

The default color for radio buttons is configured globally by using the MAT_RADIO_DEFAULT_OPTIONS provider.

providers: [{  

    provide: MAT_RADIO_DEFAULT_OPTIONS,  

    useValue: { color: 'accent' },  

}] 

Example: 1

app.component.html

<mat-radio-group aria-label="Select an option">  

  <mat-radio-button value="1">Option 1</mat-radio-button>  

  <mat-radio-button value="2">Option 2</mat-radio-button>  

</mat-radio-group>  

app.component.ts

import {Component} from '@angular/core';  

/** 

 * @title Basic radios 

 */  

@Component({  

  selector: 'radio-overview-example',  

  templateUrl: 'radio-overview-example.html',  

  styleUrls: ['radio-overview-example.css'],  

})  

export class RadioOverviewExample {}  

app.component.css

.mat-radio-button ~ .mat-radio-button {  

  margin-left: 16px;  

}

Output:

If Radio buttons with the same name occurs then only one may be selected at a time.

Example 2:

app.module.ts

import { AppComponent } from 'app.component';  

import {FormsModule, ReactiveFormsModule} from '@angular/forms';  

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';  

import {MatRadioModule} from '@angular/material'  

import { BrowserModule } from '@angular/platform-browser';  

import { NgModule } from '@angular/core';  

@NgModule({  

   declarations: [  

      AppComponent  

   ],  

   imports: [  

      BrowserModule,  

      BrowserAnimationsModule,  

      MatRadioModule,  

      FormsModule,  

      ReactiveFormsModule  

   ],  

   providers: [],  

   bootstrap: [AppComponent]  

})  

export class AppModule { }

Below is the modified CSS file app.component.css.

.tp-radio-group {  

   display: inline-flex;  

   flex-direction: column;  

}  

.tp-radio-button {  

   margin: 5px;  

}  

.tp-selected-value {  

   margin: 15px 0;  

}  

app.component.ts

import { Validators } from "@angular/forms";  

import { FormControl } from "@angular/forms";  

import { Component } from '@angular/core';  

@Component({  

   selector: 'app-root',  

   templateUrl: './app.component.html',  

   styleUrls: ['./app.component.css']  

})  

export class AppComponent {  

   title = 'materialApp';   

   favoriteSeason: string;  

   seasons: string[] = ['Winter', 'Spring', 'Summer', 'Autumn'];  

}

app.component.ts

import { Validators } from "@angular/forms";  

import { FormControl } from "@angular/forms";  

import { Component } from '@angular/core';  

@Component({  

   selector: 'app-root',  

   templateUrl: './app.component.html',  

   styleUrls: ['./app.component.css']  

})  

export class AppComponent {  

   title = 'materialApp';   

   favoriteSeason: string;  

   seasons: string[] = ['Winter', 'Spring', 'Summer', 'Autumn'];  

} 

Below is the HTML host file app.component.html.

<mat-radio-group class = "tp-radio-group" [(ngModel)] = "favoriteSeason">  

   <mat-radio-button class = "tp-radio-button"  

      *ngFor = "let season of seasons" [value] = "season">  

      {{season}}  

   </mat-radio-button>  

</mat-radio-group>  

<div class = "tp-selected-value">  

   Selected Season: {{favoriteSeason}}  

</div> 

Output:

Explanation:

First, we have created a radio button group using mat-radio-group bound with ngModel. Then, we have added radio buttons by using the mat-radio-button.