'mat-toolbar' is not a known element - Angular 5

Question

I have created a new project, and I am trying to add angular-material.

I have created material.module.ts in my app folder:

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

import {
    MatButtonModule,
    MatMenuModule,
    MatIconModule,
    MatCardModule,
    MatSidenavModule,
    MatFormFieldModule,
    MatInputModule,
    MatTooltipModule,
    MatToolbarModule
} from '@angular/material';

@NgModule({
    imports: [
        MatButtonModule,
        MatMenuModule,
        MatIconModule,
        MatCardModule,
        MatSidenavModule,
        MatFormFieldModule,
        MatInputModule,
        MatTooltipModule,
        MatToolbarModule,
    ],
    exports: [
        MatButtonModule,
        MatMenuModule,
        MatIconModule,
        MatCardModule,
        MatSidenavModule,
        MatFormFieldModule,
        MatInputModule,
        MatTooltipModule,
        MatToolbarModule
    ]
})
export class MaterialModule { }

and I have imported it into one of my components:

import { MaterialModule } from '../material.module';

Furthermore, I have set up angular material in index.html

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

in my style.css

@import '~@angular/material/prebuilt-themes/pink-bluegrey.css';

I know that it is working cause I have shown a material-icon as a test:

<i class="material-icons">face</i>

but when I try to create the footer it fails and it shows this message:

Uncaught Error: Template parse errors: 'mat-toolbar' is not a known element: 1. If 'mat-toolbar' is an Angular component, then verify that it is part of this module. 2. If 'mat-toolbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

The component should be ``, **not** ` – Edric May 03 '18 at 09:32 — Edric, May 03 '18 at 09:32

score 32 · Accepted Answer · answered May 03 '18 at 09:35

That's because you have to import a module to the module which contains the component declaration, not into the component itself:

app.module.ts

import { MaterialModule } from './material.module';

@NgModule({
  imports: [
    // ...
    MaterialModule
  ],
  declarations: [
    MyCoolComponent,
    // ...
  ]
})

P.S. The correct way to use a material icon is to use the MatIcon component. Example usage:

<mat-icon>home</mat-icon>

score 15 · Answer 2 · answered Dec 13 '19 at 15:15

15

Best way
for a quick good fix

import {MatToolbarModule} from '@angular/material/toolbar';

in your app.module.ts

then declare MatToolbarModule in your declarations[].

answered Dec 13 '19 at 15:15

Kofi Sammie

3,237
1
17
17

2

remember to add the MatToolbarModule into imports section. Maybe not necessary to put into declarations – ASPaiva Jan 10 '22 at 19:58

score 4 · Answer 3 · answered May 03 '18 at 08:02

4

Works fine for me here: https://stackblitz.com/edit/angular-w9ckf8

Look over the link and see if there's anything you are missing.

answered May 03 '18 at 08:02

mahval

2,133
1
18
25

I do not really get the difference but it seems that if I import it into angular.module.ts it works so I will do it in this way – bellotas May 03 '18 at 08:12

score 1 · Answer 4 · answered Aug 10 '21 at 04:31

1

run ng add @angular/material in your terminal and this will fix your error

answered Aug 10 '21 at 04:31

TaoneswaKasirai

11
1

It is not worked for me – Nimasha Madhushani Dec 31 '22 at 07:01

score 0 · Answer 5 · answered Mar 09 '21 at 12:57

0

You need to import import {MatToolbarModule} from '@angular/material/toolbar'; and add it in imports array. Also the code for material is maintained in https://github.com/angular/components.

answered Mar 09 '21 at 12:57

Amit Kumar

11
2

score 0 · Answer 6 · answered Apr 14 '22 at 10:51

I got the same error, I realized it was my fault. I was getting this error because I didn't make the following definition to the App component.

app.module.ts

@NgModule({
   declarations: [
     AppComponent,
     DataTableComponent,
     PeriodicComponent,
     HeaderComponent -- here is using MatToolbarModule.
   ],

first you have to add the component that uses material dizany component to declarations array.

score 0 · Answer 7 · answered May 24 '23 at 02:24

0

Try upgrading or downgrading your angular service extension in your vs code

Name: Angular Language Service Description: Editor services for Angular templates Publisher: Angular VS Marketplace Link: Here

answered May 24 '23 at 02:24

Abhith Anto

99
1
4

score -1 · Answer 8 · answered Jun 24 '21 at 06:32

I have resolved this issue by making strict as false

Open

tsconfig.json

{ "compilerOptions" : { "strict" : false} }

Note: I have imported MatToolbarModule too

import {MatToolbarModule} from '@angular/material/toolbar';

and declared in Imports array

'mat-toolbar' is not a known element - Angular 5

8 Answers8

Linked