Angular 14 mat-checkbox not clickable

Question

I got an app that uses a schema to define the columns of an editable mat-table.

The problem is that when I click the pencil, the checkboxes aren't clickable. For more details, I suggest you go see the stackblitz project.

https://stackblitz.com/edit/angular-ivy-tjsqam?file=src/app/app.component.html

Code example :

<div *ngIf="col.key != 'isEdit'">
  <input
    [type]="col.type"
    [(ngModel)]="element[col.key]"
    [checked]="GetCheckBoxValue(element, col.key)"
  />

In not editing mode :

In editing mode :

Mr. Stash · Accepted Answer · 2022-11-18 16:43:16Z

1

The example is in Angular 15

change the following thing, this should make the checkbox work

<tr
  mat-row
  *matRowDef="let row; columns: displayedColumns"
  (click)="clickedRows.add(row)"
  [class.highlightTableColor]="clickedRows.has(row)"
></tr>

clickedRows = new Set<model>();

or remove the return statement from the highlight method

highlight(row: { ID: number }) {
  if (!this.editing) this.selectedID = row.ID;
}

answered Nov 18, 2022 at 16:43

Mr. Stash

3,2284 gold badges13 silver badges27 bronze badges

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

1 Comment

Marc Roussel Over a year ago

Can't believe it. I was looking at the wrong place obviously. It was the return false of the highlight.

Collectives™ on Stack Overflow

Angular 14 mat-checkbox not clickable

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related