Why does mat-tables matRowDef contain 2 variables?

Question

I just implemented an example mat-table from angular material io. I am going through the template code and I don't understand the need of "let row;..." in the matRowDef in the last line. When removing it, the table runs still fine. Can anyone tell me what is this line for?

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

<!--- Note that these columns can be defined in any order.
      The actual rendered columns are set as a property on the row definition" -->

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

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

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

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

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

raharshi puli raharshi puli · Accepted Answer · 2020-01-15T09:33:32

to get a whole row value we need it . as you see below i want to get a whole row value on a row click i used let row

    <tr mat-row *matRowDef="let row; columns: displayedColumns;"
    (click)="selection.toggle(row)">

Why does mat-tables matRowDef contain 2 variables?

1 Answers