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.

Installation: npm i -S @angular/material @angular/cdk @angular/animations
Importing in app.module.ts: import {MatCheckboxModule} from '@angular/material/checkbox'; and imports: [ BrowserModule, AppRoutingModule, FontAwesomeModule, MatCheckboxModule ],
In app.component.ts: checked = false; labelPosition: 'before' | 'after' = 'after';
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.

danish ali · Accepted Answer · 2021-03-14 15:33:59Z

2

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

answered Mar 14, 2021 at 15:33

danish ali

1321 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Amrit · Accepted Answer · 2021-03-14 15:31:39Z

1

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 { }

answered Mar 14, 2021 at 15:31

Amrit

2,1831 gold badge24 silver badges42 bronze badges

Comments

s-ghansiala · Accepted Answer · 2021-03-14 17:02:27Z

0

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
  ], . . .

answered Mar 14, 2021 at 17:02

s-ghansiala

671 silver badge5 bronze badges

Collectives™ on Stack Overflow

Unable to use angular material in my angular project

3 Answers 3

Comments

Comments

app.module.ts

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

app.module.ts

Comments

Your Answer

Sign up or log in

Post as a guest

Related