How to set Serial Number in Mat-table angular 5
if you are using paginator from angular then
<td mat-cell *matCellDef="let item; let i = index">
{{ (paginatorRef.pageIndex * paginatorRef.pageSize) + (i + 1) }}
</td>
<mat-paginator
#paginatorRef>
</mat-paginator>
if you are not using paginator and the whole table is in one page then
<td mat-cell *matCellDef="let element; let i = index;"> {{i+1}} </td>
To get auto increment index value to the next pages.
([Page Index] * [Page Size] + [row Index + 1])
Table's td cell loop source code
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header> No.</th>
<td mat-cell *matCellDef="let item; let i = index">
{{ (paginatorRef.pageIndex * paginatorRef.pageSize) + (i + 1) }}
</td>
</ng-container>
mat-paginator source code
<mat-paginator
fxFlex="100"
#paginatorRef
[length]="5"
[pageSize]="5"
[pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator>
[ Note: Add local reference as #paginatorRef into your mat-paginator code ]
Just use this code in a row to get index -
<td mat-cell *matCellDef="let element; let i = index;"> {{i+1}} </td>
Here is