Angular 6 error show <mat-panel-title> is not a known element

2
votes

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

  1. 'mat-panel-title' is not a known element:
  2. 'mat-panel-description' is not a known element:
  3. 'mat-expansion-panel-header' is not a known element:
  4. 'mat-form-field' is not a known element:
  5. '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;

2
angularangular-materialangular6angular-material2angular2-forms

2 Answers

4
votes

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 !

2
votes

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

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