angular material - how to capture the table row, to which the checkbox column belongs

Question

In my angular 6 app I have a material table, which has a checkbox column. When the checkbox is clicked, I need to capture the table row, to which is belongs, so I can update the underlying database record. How do I get a hold of that entire row? Here is the html for the table:

<div class="example-container mat-elevation-z8">
  <mat-table #table [dataSource]="dataSource">

    <ng-container matColumnDef="checked">
      <mat-header-cell *matHeaderCellDef>Check</mat-header-cell>
      <mat-cell *matCellDef="let element"> 
        <mat-checkbox [(ngModel)]="element.checked" (change)=updateCheckedList($event)></mat-checkbox>
      </mat-cell>
    </ng-container>


    <ng-container matColumnDef="position">
      <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
    </ng-container>


    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
    </ng-container>


    <ng-container matColumnDef="weight">
      <mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
    </ng-container>

    <!-- Symbol Column -->
    <ng-container matColumnDef="symbol">
      <mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;" [ngClass]="{hovered: row.hovered, highlighted: row.highlighted}" (click)="row.highlighted = !row.highlighted" (mouseover)="row.hovered = true" (mouseout)="row.hovered = false"></mat-row>
  </mat-table>
</div>

Here is the updateCheckedList($event) handler in my app.component.ts:

 updateCheckedList(eventTaget) {
      console.log('event target:  ' + eventTaget.target);
  }

The eventTaget.target comes off as undefined, where my goal os to get ahold of the entire row, to which that checkbox cell belongs

What is the proper technique for capturing the whole table row?

This may help: [Get index of row in Angular Material Table](https://stackoverflow.com/q/50292349/1164465). — Christopher Peisert, Feb 02 '20 at 17:03

score 4 · Answer 1 · edited Jan 04 '21 at 23:56

For that you need to pass the index of your checkbox also using *matCellDef="let element; let i=index" your column will look like this

 <ng-container matColumnDef="checked">
      <mat-header-cell *matHeaderCellDef>Check</mat-header-cell>
      <mat-cell *matCellDef="let element; let i=index"> 
        <mat-checkbox (change)=updateCheckedList(element)></mat-checkbox>
      </mat-cell>
    </ng-container>

now you can get the entire object in updateCheckedList method using index

updateCheckedList(element)
{
  console.log(element);
}

click here for demo

angular material - how to capture the table row, to which the checkbox column belongs

1 Answers1