Angular 6 error show is not a known element

Question

I am trying to use Angular Material in Angular 6 project but getting errors

'mat-panel-title' is not a known element:
'mat-panel-description' is not a known element:
'mat-expansion-panel-header' is not a known element:
'mat-form-field' is not a known element:
'mat-expansion-panel' is not a known element:

Here is the code

<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Personal data
      </mat-panel-title>
      <mat-panel-description>
        Type your name and age
      </mat-panel-description>
    </mat-expansion-panel-header>

    <mat-form-field>
      <input matInput placeholder="First name">
    </mat-form-field>

    <mat-form-field>
      <input matInput placeholder="Age">
    </mat-form-field>
  </mat-expansion-panel>
  <mat-expansion-panel (opened)="panelOpenState = true"
                       (closed)="panelOpenState = false">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Self aware panel
      </mat-panel-title>
      <mat-panel-description>
        Currently I am {{panelOpenState ? 'open' : 'closed'}}
      </mat-panel-description>
    </mat-expansion-panel-header>
    <p>I'm visible because I am open</p>
  </mat-expansion-panel>
</mat-accordion>

ts file
panelOpenState = false;

score 4 · Accepted Answer · answered Dec 06 '19 at 10:10

4

You have to import the Material Module in the root of your project or in the module if you are using module architecture. Check this https://stackoverflow.com/a/46480745/9490861 !

answered Dec 06 '19 at 10:10

Prajil Shrestha

124
1
9

score 4 · Answer 2 · answered Dec 06 '19 at 10:29

4

You have to import this in your module where you are using it:

import {MatExpansionModule} from '@angular/material/expansion';

answered Dec 06 '19 at 10:29

Mustafa Kunwa

821
1
9
19

score 0 · Answer 3 · answered Apr 06 '22 at 06:39

whatever you use like mat-form-field, mat-expansion-panel etc you need to import that in your .ts file of that component as well as at the app.module.ts file.

After you

import {MatExpansionModule} from '@angular/material/expansion';

and

@NgModule({
imports:[
MatExpansionModule,]
})

the you need to import again

import {MatExpansionModule} from '@angular/material/expansion';

this in your particular .ts file of the component.

Angular 6 error show is not a known element

3 Answers3