I have data coming in from an API and I want to display it in a table. In the table, there is a column for serial numbers (#). Currently, I am able to show the serial numbers starting from 1 on every page. However, when I switch pages, the counting starts again from 1 instead of continuing where it left off.
Image page 1
https://i.sstatic.net/fZPzw.png
Image page 2
https://i.sstatic.net/3I6kK.png
Code
<tbody>
<tr *ngFor="let user of _data | paginate: { itemsPerPage: 10, currentPage: p }; let i=index">
<th>{{i + 1}}</th>
<th>{{user.FirstName}}</th>
<th>{{user.LastName}}</th>
<th>{{user.Email}}</th>
<th>
<button *ngIf="user.IsActive==false" class="btn btn-success btn-xs" (click)="changeStatus(user.Id)"> <i class="fa fa-check"></i> Active </button>
<button *ngIf="user.IsActive==true" class="btn btn-danger btn-xs" (click)="changeStatus(user.Id)"><i class="fa fa-trash-o"></i> Block</button>}}
</th>
</tr>
</tbody>