Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 565
userx Avatar asked Feb 19 '18 14:02

userx


People also ask

What is indeterminate in Mat-checkbox?

<mat-checkbox> supports an indeterminate state, similar to the native <input type="checkbox"> . While the indeterminate property of the checkbox is true, it will render as indeterminate regardless of the checked value. Any interaction with the checkbox by a user (i.e., clicking) will remove the indeterminate state.

How do I keep my mat-checkbox checked by default?

To set mat-checkbox checked by default we use checked attribute or [ngModel] as shown below. We can set the IsChecked property to true in constructor.

Can't bind since it isn't a known property?

What does "Can't bind to 'x' since it isn't a known property of 'y'" mean? link. This error often means that you haven't declared the directive "x" or haven't imported the NgModule to which "x" belongs. Perhaps you declared "x" in an application submodule but forgot to export it.

How to uncheck mat-checkbox in Angular?

Angular Material <mat-checkbox> has a property checked that is used to check and uncheck the checkbox dynamically. At runtime we can check and uncheck checkbox by passing true and false value to checked property using property binding.


1 Answers

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

like image 139
Thor Jacobsen Avatar answered Nov 06 '22 09:11

Thor Jacobsen