There is a similar question How to pass selected row value of table to button click event - Material design - Angular 6, however I don't find the solutions there helpful to my case.

I'm using Angular Material table to display my data, I have select checkbox beside each row of data.

What I'm trying to achieve is that user should be able to select the desired rows and upon button submission, all of the selected rows will be passed to the backend for processing. Right now my approach is when the checkbox is clicked it will call a function (click)="onSelectCheckbox(row)" in my ponent.ts and append that row to an array, when the user deselect the row it will trigger the same function and drop the row object by .filter().

This is working fine if I'm clicking the checkbox on a relatively normal pace, however the logic starts screwing up when I repeatedly click different check boxes on a faster pace. On button submission, my console shows rows that are deselected are still in the array and rows that are ticked are not in the array.

I have this checkbox in my mat-table:

<ng-container matColumnDef="select">
     <th mat-header-cell *matHeaderCellDef>
       <mat-checkbox (change)="$event ? masterToggle() : null" [checked]="selection.hasValue() && isAllSelected()"
              [indeterminate]="selection.hasValue() && !isAllSelected()" [aria-label]="checkboxLabel()">
       </mat-checkbox>
     </th>
     <td mat-cell *matCellDef="let row">
       <mat-checkbox (click)="onSelectCheckbox(row)" (change)="$event ? selection.toggle(row) : null"
         [checked]="selection.isSelected(row)" [aria-label]="checkboxLabel(row)">
       </mat-checkbox>
     </td>
</ng-container>
.
.
.
<button class="btn btn-primary" (click)="openSubmitConfirmation()">Submit</button>

and the onSelectCheckbox(row) logic in my ponent.ts as well as my button to test and show the selected rows in my console:

selectedPayment = new Array<Payment>();

onSelectCheckbox(row: Payment) {
    if (this.selectedPayment === undefined || this.selectedPayment.length === 0) {
      this.selectedPayment.push(row);
    } else if (this.selectedPayment.includes(row)) {
      this.selectedPayment = this.selectedPayment.filter(
        x => x.payment_reference !== row.payment_reference);
    } else {
      this.selectedPayment.push(row);
    }
  }

openSubmitConfirmation() {
    console.log(this.selectedPayment);
  }

I'm sure there is a better and smarter way to do this but I could not find any useful resources to do this, any guidance would be appreciated.

There is a similar question How to pass selected row value of table to button click event - Material design - Angular 6, however I don't find the solutions there helpful to my case.

I'm using Angular Material table to display my data, I have select checkbox beside each row of data.

What I'm trying to achieve is that user should be able to select the desired rows and upon button submission, all of the selected rows will be passed to the backend for processing. Right now my approach is when the checkbox is clicked it will call a function (click)="onSelectCheckbox(row)" in my ponent.ts and append that row to an array, when the user deselect the row it will trigger the same function and drop the row object by .filter().

This is working fine if I'm clicking the checkbox on a relatively normal pace, however the logic starts screwing up when I repeatedly click different check boxes on a faster pace. On button submission, my console shows rows that are deselected are still in the array and rows that are ticked are not in the array.

I have this checkbox in my mat-table:

<ng-container matColumnDef="select">
     <th mat-header-cell *matHeaderCellDef>
       <mat-checkbox (change)="$event ? masterToggle() : null" [checked]="selection.hasValue() && isAllSelected()"
              [indeterminate]="selection.hasValue() && !isAllSelected()" [aria-label]="checkboxLabel()">
       </mat-checkbox>
     </th>
     <td mat-cell *matCellDef="let row">
       <mat-checkbox (click)="onSelectCheckbox(row)" (change)="$event ? selection.toggle(row) : null"
         [checked]="selection.isSelected(row)" [aria-label]="checkboxLabel(row)">
       </mat-checkbox>
     </td>
</ng-container>
.
.
.
<button class="btn btn-primary" (click)="openSubmitConfirmation()">Submit</button>

and the onSelectCheckbox(row) logic in my ponent.ts as well as my button to test and show the selected rows in my console:

selectedPayment = new Array<Payment>();

onSelectCheckbox(row: Payment) {
    if (this.selectedPayment === undefined || this.selectedPayment.length === 0) {
      this.selectedPayment.push(row);
    } else if (this.selectedPayment.includes(row)) {
      this.selectedPayment = this.selectedPayment.filter(
        x => x.payment_reference !== row.payment_reference);
    } else {
      this.selectedPayment.push(row);
    }
  }

openSubmitConfirmation() {
    console.log(this.selectedPayment);
  }

I'm sure there is a better and smarter way to do this but I could not find any useful resources to do this, any guidance would be appreciated.

• javascript
• angular
• typescript
• angular-material

• In a row you can have one item. Why you want to send it as array ? Or you build a horizontal table ? – Mises Commented Oct 18, 2019 at 8:31
• Because I wasn't sure how would I know which rows are selected for submission other than appending it to an array of row data object (when checkbox is clicked) and then upon button submit I will call the array instance which store the selected rows. This is a sample of how my table looks like (stackblitz./edit/angular-xmnbkz). – kaiilim Commented Oct 18, 2019 at 8:35
• @kaiilm It's ok it was just a mistake in title. – Mises Commented Oct 18, 2019 at 8:37
• Demn and i did mistake 2 lol. – Mises Commented Oct 18, 2019 at 8:38

1 Answer 1

to get whole selected elements at once you can use SelectionModel

SelectionModel from @angular/cdk/collections

Here I created stackblitz check this https://stackblitz./edit/angular-jlk4vf-spkxv2