Angular 5 Material Radio Button Form Controls

A radio-button is an element that allows the user to choose only one option from a set.

The below example is used to choose only one option from a gender set using Angular 5 Material.

radiobutton.ts -

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

@Component({

  selector: 'radiobutton',

  templateUrl: 'radiobutton.html'

})

export class Radiobutton{

//Todo – Radio button

}

And radiobutton.html –

<mat-card>

  <mat-card-content>

    <h2>Pick Your Gender</h2>

    <section >

      <mat-radio-group [(ngModel)]="Gender">

        <mat-radio-button value="Male">Male</mat-radio-button>

        <mat-radio-button value="Female">Female</mat-radio-button>

      </mat-radio-group>

    </section>

  </mat-card-content>

</mat-card>

And the NgModule –

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

import {CdkTableModule} from '@angular/cdk/table';

import {HttpClientModule} from '@angular/common/http';

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

import {HttpModule} from '@angular/http';

import {

  MatAutocompleteModule,

  MatButtonModule,

  MatButtonToggleModule,

  MatCardModule,

  MatCheckboxModule,

  MatChipsModule,

  MatDatepickerModule,

  MatDialogModule,

  MatDividerModule,

  MatExpansionModule,

  MatGridListModule,

  MatIconModule,

  MatInputModule,

  MatListModule,

  MatMenuModule,

  MatNativeDateModule,

  MatPaginatorModule,

  MatProgressBarModule,

  MatProgressSpinnerModule,

  MatRadioModule,

  MatRippleModule,

  MatSelectModule,

  MatSidenavModule,

  MatSliderModule,

  MatSlideToggleModule,

  MatSnackBarModule,

  MatSortModule,

  MatStepperModule,

  MatTableModule,

  MatTabsModule,

  MatToolbarModule,

  MatTooltipModule,

} from '@angular/material';

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

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

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

import {Radiobutton} from './app/radiobutton;

@NgModule({

  exports: [

    CdkTableModule,

    MatAutocompleteModule,

    MatButtonModule,

    MatButtonToggleModule,

    MatCardModule,

    MatCheckboxModule,

    MatChipsModule,

    MatStepperModule,

    MatDatepickerModule,

    MatDialogModule,

    MatDividerModule,

    MatExpansionModule,

    MatGridListModule,

    MatIconModule,

    MatInputModule,

    MatListModule,

    MatMenuModule,

    MatNativeDateModule,

    MatPaginatorModule,

    MatProgressBarModule,

    MatProgressSpinnerModule,

    MatRadioModule,

    MatRippleModule,

    MatSelectModule,

    MatSidenavModule,

    MatSliderModule,

    MatSlideToggleModule,

    MatSnackBarModule,

    MatSortModule,

    MatTableModule,

    MatTabsModule,

    MatToolbarModule,

    MatTooltipModule,

  ]

})

export class MaterialModule {}

@NgModule({

  imports: [

    BrowserModule,

    BrowserAnimationsModule,

    FormsModule,

    HttpModule,

    HttpClientModule,

    MaterialModule,

    MatNativeDateModule,

    ReactiveFormsModule,

  ],

  entryComponents: [Radiobutton],

  declarations: [Radiobutton],

  bootstrap: [Radiobutton],

  providers: []

})

export class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);