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

Output:

Angular Material Radio Button

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:

Angular Material Radio Button

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.

Next TopicAngular Material Chips#

angular angular 8 angular material angular material features angular material tutorial angularjs angularjs vs angular css html javascript what is angular material

Angular Material Radio Button

Angular Material Radio Button

Radio-Button Label

Radio Groups

Example: 1

Example 2:

Angular Reactive Forms

Bootstrap Modal Popup in Angular 9/8

You may also like