'mat-card' is not a known element in Angular 7

I can not see your EmployeesComponent in your list of declarations. The EmployeesComponent need to be declared in the same module as where you import the MatCardModule, like:

declarations: [
    EmployeesComponent
],
imports: [
    MatCardModule
]

I am guessing either that you have forgotten to declare the EmployeesComponent in your app module, or that you have another module, perhaps Employees module, where you have to import the MatCardModule.

You can import MatCardModule as

import { MatCardModule } from '@angular/material/card';


In your app.module.ts file add below lines:

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


schemas: [CUSTOM_ELEMENTS_SCHEMA],

ASSUMING: your component is EmployeeAddComponent (already included html (with mat-card, mat-form-field etc))

SOLUTION: open app.module.ts

first: check import 'area', make sure EmployeeAddComponent is imported. second: check @NgModule at declarations 'area', make sure EmployeeAddComponent is written there.


At times, error of types "....is not a known element in Angular 7" is also specific to Visual Studio Code. If you've already tried below steps :

  1. npm install --save @angular/material
  2. ng add @angular/material

and still getting the above error message in Visual Studio editor, then close the project in editor and re-open.