Fix ‘mat-radio-button’ is not a known element Error in Angular

You are getting this error because you have not imported the MatRadioModule in your app.module.ts file.

The mat radio button is a part of the MatRadioModule, therefore, to use it in your Angular application you have to import the MatRadioModule in your app.module.ts file.

The MatRadioModule can be imported from the radio library of the angular material.

Here is how you can import the MatRadioModule inside your app.module.ts file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule} from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatRadioModule } from '@angular/material/radio';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    BrowserAnimationsModule,
    MatRadioModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Note: If your Angular application has more than one modules then you have to import the MatRadioModule in each module.ts wherever you are using the mat radio buttons.

OR if you have a common shared module then you have to add the MatRadioModule to the imports as well as the exports array of this module so that every module importing this module could use all of its modules.

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.