CODEWITHSUNDEEP
angulartypescriptangular-material
Rinktacular
Rinktacular

Reputation: 1136

Material Checkboxes not working with their 'checked' derivative

I have a table of records where the first cell in each column has a checkbox. when the checkbox is clicked, I store that record's id into an array in typescript:

onCheckboxClick(id) {
  if (this.selectedInvoiceables.indexOf(id) > -1) {
    this.selectedInvoiceables.splice(id, 1);
  } else {
    this.selectedInvoiceables.push(id);
  }
  if (this.selectedInvoiceables.length > 1) {
    this.disableBulkEdit = false;
  } else {
    this.disableBulkEdit = true;
  }
}

and here is the checkbox:

<mat-checkbox
   class="checkbox"
   (change)="onCheckboxClick(invoice.id)"
   id = "invoiceCheckbox{{invoice.id}}"
   [checked]="selectedInvoiceables.indexOf(invoice.id) > -1"
> </mat-checkbox>

So, whenever the checkboxes are clicked, we store the id. And that works fine, however, there seems to be an issue where clicking on one checkbox will deselect another checkbox even though the value is still contained in my selectedInvoiceables array. Is my current check for the [checked] derivative not good enough or being refreshed irregularly?

Upvotes: 0

Views: 921

Answers (1)

th3n3wguy
th3n3wguy

Reputation: 3737

You could try using the [(ngModel)]="" syntax to bind the model/state of the checkbox to values:

Upvotes: 2

Related Questions