CODEWITHSUNDEEP
angularangular-material
userx
userx

Reputation: 515

Can't bind to 'checked' or 'indeterminate' since it isn't a known property of 'mat-checkbox'

I'm posting here because I didn't find any thing that may help. I'm trying to create a selection data table using angular material,

The data that should be displayed by the table comes from laravel5.4 application.

html code:

<!-- Checkbox Column -->
<ng-container matColumnDef="select">
  <mat-header-cell *matHeaderCellDef>
    <mat-checkbox (change)="$event ? masterToggle() : null"
                  [checked]="selection.hasValue() && isAllSelected()"
                  [indeterminate]="selection.hasValue() && !isAllSelected()">
    </mat-checkbox>
  </mat-header-cell>
  <mat-cell *matCellDef="let row">
    <mat-checkbox (click)="$event.stopPropagation()"
                  (change)="$event ? selection.toggle(row) : null"
                  [checked]="selection.isSelected(row)">
    </mat-checkbox>
  </mat-cell>
</ng-container>

.....

error details:

enter image description here

Upvotes: 11

Views: 15762

Answers (2)

user2581462
user2581462

Reputation: 31

import MatCheckboxModule from @angular/Material as shown below.Add below line in generated material.module.ts file.

import { MatCheckboxModule } from '@angular/Material'

And additionally i have added MatToolbarModule,MatCardModule,MatListModule for design purpose.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
MatToolbarModule,
MatCardModule,
MatCheckboxModule,
MatListModule,
} from '@angular/material';

@NgModule({

exports:[
MatToolbarModule,
MatCardModule,
MatCheckboxModule,
MatListModule
],

providers: [

],
declarations: []
})
export class MaterialModule { }

And import material module in app.module.ts file so that we can use material module across the application.

import { MaterialModule } from './material/material.module';

And also add MaterialModule in imports array property of @NgModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MaterialModule } from './material/material.module';
import { AppComponent } from './app.component';

@NgModule({

declarations: [
AppComponent],

imports: [
BrowserModule,
MaterialModule
],

providers: [],
bootstrap: [AppComponent]
})

export class AppModule { }

Upvotes: 1

Thor Jacobsen
Thor Jacobsen

Reputation: 8851

From my comment: Remember to include the module for the component (MatCheckboxModule in this case)

Upvotes: 18

Related Questions