angular material 13 - checkbox checked property is checked when set to 0

Darrell 0
Viewed 22

After upgrading from Angular 12 to 13, I noticed that when the checked property for a checkbox is set to 0, the checkbox is checked.

But, it is unchecked when set to false.

So, 0 and false behaved the same in version 12, appearing as unchecked, but differently in version 13.

In this example, workOrderDtiConstraint.ESCALATED is the field used. When set to 0, the box is checked, when set to false, it is unchecked.

<ng-container matColumnDef="escalated">
    <mat-header-cell *matHeaderCellDef>Escalated</mat-header-cell>
    <mat-cell class="checkBox" *matCellDef="let workOrderDtiConstraint, let i = index">
      <mat-checkbox color="primary"
         [checked]="workOrderDtiConstraint.ESCALATED">
      </mat-checkbox>
    </mat-cell>
  </ng-container>

Any ideas?

Thanks

angular-material angular
1 Answers

You can use a helper function like this:

getBoolean(value) {
    switch (value) {
        case true:
        case "true":
        case "True":
        case 1:
        case "1":
        case "on":
        case "yes":
            return true;
        default:
            return false;
    }
}

And your code would be like this:

<ng-container matColumnDef="escalated">
    <mat-header-cell *matHeaderCellDef>Escalated</mat-header-cell>
    <mat-cell class="checkBox" *matCellDef="let workOrderDtiConstraint, let i = index">
      <mat-checkbox color="primary"
         [checked]="getBoolean(workOrderDtiConstraint.ESCALATED)">
      </mat-checkbox>
    </mat-cell>
</ng-container>
YSFKBDY0
Related