Angular Material Error List

A list of errors (with solutions) that you may run into when developing your Angular app using Angular Material.

Last updated on 11/21/2021


It's easy to run into some common errors when you first implement a new Angular Material Design component into your Angular application.

This post is an aggregation of common errors for each Angular Material Design component.

Autocomplete (MatAutocomplete)

A common error when first using the AutoComplete component is this: 'mat-autocomplete' is not a known element:

The solution for this error is to add the MatAutocompleteModule to the app.module.ts file in the root of your Angular project.

You will add the following import to the top of your app.module.ts: import { MatAutocompleteModule } from '@angular/material/autocomplete';

Then add MatAutocompleteModule to your imports section:

  imports: [
    MatAutocompleteModule,
  ],

To fix the 'mat-autocomplete' is not a known element: error, your app.module.ts should look like this:

import { NgModule } from '@angular/core';
import { MatAutocompleteModule } from '@angular/material/autocomplete';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    MatAutocompleteModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Read More About the Material Autocomplete component

Badge (MatBadge)

A common error when first using the Badge component is this that the newly added badge does not show up:

The solution for this error is to add the MatBadgeModule to the app.module.ts file in the root of your Angular project.

You will add the following import to the top of your app.module.ts: import { MatBadgeModule } from '@angular/material/badge';

Then add MatBadgeModule to your imports section:

  imports: [
    MatBadgeModule,
  ],

To fix the missing badge issue, your app.module.ts should look like this:

import { NgModule } from '@angular/core';
import { MatBadgeModule } from '@angular/material/badge';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    MatBadgeModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Read More About the Material Badge component

Bottom Sheet

Button

Button toggle

Card

Checkbox

Chips

Datepicker

Dialog

Divider

Expansion Panel

Form field

Grid list

Icon

Input

List

Paginator

Progress Bar (MatProgressBar)

A common error you will see when first trying to use the MatProgressBar is this: 'mat-progress-bar' is not a known element

The solution for this error is to add the MatProgressBarModule to the app.module.ts file in the root of your Angular project.

You will add the following import to the top of your app.module.ts: import { MatProgressBarModule } from '@angular/material/progress-bar';

Then add MatProgressBarModule to your imports section:

  imports: [
    MatProgressBarModule,
  ],

To fix the 'mat-progress-bar' is not a known element error, your app.module.ts should look like this:

import { NgModule } from '@angular/core';
import { MatProgressBarModule } from '@angular/material/progress-bar';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    MatProgressBarModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Read More About the Material Progress Bar

Progress spinner

Radio button

Ripples

Select

Sidenav

Slide toggle

Slider

Snackbar

Sort header

Stepper

Table

Tabs

Toolbar

Tooltip

Tree