Hello Devs, 

In this tutorial, we will learn Angular 9 Material Radio Button Example | mat radio button in Angular

In this section, we will create material radio button in angular 6, angular 7, angular 8 and angular 9.

Follow this step by step guide below. 



Create New App

ng new app-material



Add Material Design

ng add @angular/material


Cmd like bellow:

Installing packages for tooling via npm.

Installed packages for tooling via npm.

? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink     

   [ Preview: https://material.angular.io?theme=indigo-pink ]

? Set up global Angular Material typography styles? Yes

? Set up browser animations for Angular Material? Yes



Example 1: Basic Material Radio Button


src/app/app.module.ts

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

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

  

import { AppComponent } from './app.component';

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

  

import {MatRadioModule} from '@angular/material/radio';

  

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    BrowserAnimationsModule,

    MatRadioModule,

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }


src/app/app.component.html

<h4>Angular Radio Button Example</h4>

  

<mat-radio-group

  aria-labelledby="example-radio-group-label"

  class="example-radio-group">

  <mat-radio-button class="example-radio-button" *ngFor="let food of foods" [value]="food">

    {{food}}

  </mat-radio-button>

</mat-radio-group>



src/app/app.component.ts

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

  

@Component({

  selector: 'app-root',

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

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

})

export class AppComponent {

  title = 'app-material3';

  

  foods: string[] = ['Banana', 'Apple', 'Mango'];

}


Example 2: Material Radio Button with Reactive Form


src/app/app.module.ts

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

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

  

import { AppComponent } from './app.component';

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

  

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

import {MatRadioModule} from '@angular/material/radio';

import {MatButtonModule} from '@angular/material/button';

  

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    BrowserAnimationsModule,

    FormsModule,

    ReactiveFormsModule,

    MatRadioModule,

    MatButtonModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }



src/app/app.component.html

<h1>Angular Material Radio Button Example - rathorji.in</h1>

   

<form [formGroup]="form" (ngSubmit)="submit()">

  

  <mat-radio-group

    aria-labelledby="example-radio-group-label"

    class="example-radio-group"

    formControlName="foodField">

    <mat-radio-button class="example-radio-button" *ngFor="let food of foods" [value]="food">

      {{food}}

    </mat-radio-button>

  </mat-radio-group>

  <div *ngIf="form.get('foodField').hasError('required')" class="error">

        Food is required

  </div>

    

  <button mat-raised-button color="accent">Submit</button>

</form>



src/app/app.component.ts

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

  

import { FormBuilder, FormGroup, Validators} from '@angular/forms';

  

@Component({

  selector: 'app-root',

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

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

})

export class AppComponent {

  title = 'app-material2';

  

  foods: string[] = ['Banana', 'Apple', 'Mango'];

  form: FormGroup = new FormGroup({});

  

  constructor(private fb: FormBuilder) {

  

    this.form = fb.group({

      foodField: ['', [Validators.required]],

    })

  }

    

  get f(){

    return this.form.controls;

  }

    

  submit(){

    console.log(this.form.value);

  }

}

 run by following command:

ng serve


May this example help you.