How to manipulate angular materials checkbox inside a table

Question

So I am using angular materials 5 table and checkbox set up basically verbatum here. Its the example where the table has a selection checkbox. https://v5.material.angular.io/components/table/api. What I am trying to achieve is when the user clicks on a row, check to see if its valid. If it is not valid do not put it in the selection list and uncheck the row.

I am currently able to prevent it from being inserted into the selection list but the checkbox remains checked. I am trying to find a way to either uncheck after the user clicks or prevent it from checking all together. Relevant code is below.

Html:

   <div class="row tm3 bm3">
          <div class="example-container mat-elevation-z8 tm1" style="width:100%">
            <div class="example-header text-right">
              <mat-form-field>
                <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter Search">
              </mat-form-field>
            </div>
            <mat-table *ngIf="dataSource" #table [dataSource]="dataSource" matSort>

              <!-- Weight Column -->
              <ng-container matColumnDef="select">
                <mat-header-cell *matHeaderCellDef>
                  <mat-checkbox (change)="$event ? masterToggle() : null"
                                [checked]="selection.hasValue() && isAllSelected()"
                                [indeterminate]="selection.hasValue() && !isAllSelected()">
                  </mat-checkbox>
                </mat-header-cell>
                <mat-cell  *matCellDef="let row">
                  <mat-checkbox (click)="$event.stopPropagation()"
                                (change)="selectRow(row)"
                                [checked]="selection.isSelected(row)"
                                [disabled]="row.IsError||row.IsActivated">
                  </mat-checkbox>
                </mat-cell>
              </ng-container>
   <mat-header-row class="" *matHeaderRowDef="displayedColumns"></mat-header-row>
              <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
            </mat-table>

            <!--<mat-paginator #paginator
                     [pageSize]="10"
                     [pageSizeOptions]="[5, 10, 20]"
                     [showFirstLastButtons]="true">
      </mat-paginator>-->

          </div>

        </div>

typescript :

  public selectRow(data) {
    var valid = this.checkLimits(data);
    if (valid) {
      this.selection.toggle(data);
      //code stuff
    } 
else{
        this.alertService.error("Error Message"); 
     } 


  }

This checkbox should not be checked but the row data is not in this.selection array. and the checkbox continues to display as checked.

Any help would be greatly appreciated.

Answer 1

So I figured it out. On my changed attribute for the checkbox I needed to pass down the $event and my row information.

like so

(change)="selectRow($event,row)"

then on my typescript method I had to access the angularMaterials property

event.source.checked = false;

this then achieved my goal of having the checkbox not be checked and it was not in the "this.selected" array as well.