get index of row in angular material table v5

Using indexOf is an enormous waste of resources. The right way is initializing a variable with index's value, like this:

<ng-container matColumnDef="position">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> Num. </th>
  <td mat-cell *matCellDef="let element; let i = index">{{i + 1}}</td>
</ng-container>

https://material.angular.io/components/table/examples

UPDATE:

If you are using pagination the index can be calculated this way:

<ng-container matColumnDef="position">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> Num. </th>
  <td mat-cell *matCellDef="let i = index">
  {{this.paginator.pageIndex == 0 ? i + 1 : 1 + i + this.paginator.pageIndex * this.paginator.pageSize}}
  </td>
</ng-container>

You can use the filteredData property of your dataSource, like this:

<ng-container matColumnDef="weight">
  <th mat-header-cell *matHeaderCellDef> Header</th>
  <td mat-cell *matCellDef="let element"> {{dataSource.filteredData.indexOf(element)}} </td>
</ng-container>

Demo

With the @user3891850 solution(let i = index;), in case of pagination, the index will be the index in this page and not in the global object so you must be careful in case of pagination. example


Anyone using Angular6+ should use let i = dataIndex instead of let i = index as explained in this Github issue.

Here's the HTML snippet

<ng-container matColumnDef="position">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> Num. </th>
  <td mat-cell *matCellDef="let element; let i = dataIndex">{{i + 1}}</td>
</ng-container>

In case you run into this issue and you are using a paginator the index you get here:

  <td mat-cell *matCellDef="let element; let i = index">{{i}}</td>

will be the current index displayed on the table. For instance, if you are on page 2 and your page size is 5, then the first index of the table will be 0 and not 5 (or the 6th item). So what you can do to get the true index is something like this:

index =
      this.paginator.pageIndex > 0
        ? index + this.paginator.pageIndex * this.paginator.pageSize
        : index;

If the paginator is on page one, index doesn't change. Otherwise multiply the pageIndex by the pageSize and add it to the index.


increase position number in mat-table....

<ng-container matColumnDef="index">
  <th mat-header-cell *matHeaderCellDef> Sr.No </th>
  <td mat-cell *matCellDef="let i=index"> {{i+1}} </td>
</ng-container>