CODEWITHSUNDEEP
angularangular-material
SirrMaxi
SirrMaxi

Reputation: 643

'mat-checkbox' is not a known element:

I'm trying to use the checkbox of material angular but its not working. I'm going to show step by step what I'm doing:

**package.json**

    "dependencies": {
        "@angular/material": "^10.2.5",
    }

**app.module.ts**

import { MatSliderModule } from '@angular/material/slider';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
import { BrowserModule, Title } from '@angular/platform-browser'

@NgModule({
    imports: [
        MatCheckboxModule,
        MatSliderModule,
        BrowserModule,
        BrowserAnimationsModule,
    ],
    declarations: [AppComponent],
})

**app.component.html**

<mat-slider min="1" max="100" step="1" value="50"></mat-slider>
<mat-checkbox></mat-checkbox>

mat-slider is working fine, I also tried with mat-card and it works fine, but with mat-checkbox I get this error:

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

What I'm doing wrong?

Upvotes: 0

Views: 3402

Answers (2)

adalbert
adalbert

Reputation: 41

I had the same problem, but the solution was rather trivial: mat-checkbox was part of the copied component, and I forgot to add the copied component to the declaration part of the module.

Upvotes: 0

Yong Shun
Yong Shun

Reputation: 51240

Make sure you have imported MatCheckboxModule.

import {MatCheckboxModule} from '@angular/material/checkbox';

@NgModule({
    imports: [
        ..., // Other module imports
        MatCheckboxModule
    ],
    ...
})

Upvotes: 2

Related Questions