Angular Material Table: how to pass/submit selected rows upon button click?

Question

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 component.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 component.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.

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.com/edit/angular-jlk4vf-spkxv2