Why can't I use Angular material components?

Question

I have an Angular 10 project, but I get a strange error using Angular material for some components, like the form-field (instead for components like "table" everything is ok):

'mat-form-field' is not a known element:

1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message

This is my app module:

...
    import { MatFormField, MatLabel } from '@angular/material/form-field';
...

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

Answer 1

You need to import the module specific to the components you will be using. In the angular material document you will see overview, API and example tabs. Select API which has the name of the module you need to use that particular component.

In your case its:

import {MatFormFieldModule} from '@angular/material/form-field';

Don't forget to add above module name in NgModule imports

Better solution will be if you're using multiple material components is to create a module just for material modules and import in App.module.ts

import { NgModule } from '@angular/core';
import { MatCardModule } from '@angular/material/card';
import { MatButtonModule} from '@angular/material/button';
import { MatMenuModule } from '@angular/material/menu';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';

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

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