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

forked working example