Unable to use angular material in my angular project

Question

I'm trying to use angular material in my project. I have done below required settings.

1. Installation: npm i -S @angular/material @angular/cdk @angular/animations
2. Importing in app.module.ts: import {MatCheckboxModule} from '@angular/material/checkbox'; and imports: [ BrowserModule, AppRoutingModule, FontAwesomeModule, MatCheckboxModule ],
3. In app.component.ts: checked = false; labelPosition: 'before' | 'after' = 'after';
4. And finally app.component.html:

Below is the error:

Error: src/app/app.component.html:104:1 - error NG8001: 'mat-card' is not a known element:

Can someone please help me on this.

---

NOTE: I'm using bootstrap too in the same project, hope that dosen't impact this.

Answer 1

you have to include import {MatCardModule} from '@angular/material/card'; for more info https://material.angular.io/components/card/api

Answer 2

You have configuration issue :

you need to add those in module.ts file and add it in imports ,something like this:

        import { MatCardModule} from '@angular/material';
        
        @NgModule({
  imports:      [ BrowserModule, FormsModule, BrowserAnimationsModule, MatCardModule  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Answer 3

So there are few changes I needed to make, thanks to the answers I got.

app.module.ts

...
import { FormsModule } from '@angular/forms';

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

@NgModule({
  imports: [
BrowserModule,
FormsModule,
MatCardModule,
MatRadioModule
  ], . . .