I'm running into an issue with the binding of mat-checkbox within a mat-table.
The table's dataSource is a simple array of objects, each containing a boolean property for selection.
However, I can't seem to get the two-way binding working properly as the selected value always returns false when the click event is triggered.
Here's a snippet of the code:
app.component.ts
clients: Client[] = [
{ id: 1, name: `Client`, disabled: true, selected: false },
];
onClientClick(client: Client) {
console.log(client) // selected here is false
}
app.component.html
<table mat-table [dataSource]="clients">
<ng-container matColumnDef="client-name">
<th mat-header-cell *matHeaderCellDef>header</th>
<td mat-cell *matCellDef="let client">
<mat-checkbox (click)="onClientClick(client)" [(ngModel)]="client.selected" [disabled]="client.disabled">
{{ client.name }}
</mat-checkbox>
</td>
</ng-container>
<tr mat-row *matRowDef="let row; columns: displayedColumnsClients"></tr>
</table>
If anyone has any insights or solutions, please share. Thank you!