Serial number in Table Angular 2

Question

I am getting data from api and want to show in a table and in table I have # column for serial number now i want to show the serial number I have done so far this but its shows 1 to 10 serial number on every page when I change the page it shows 1- 10 counting start from 1 when ever the next page is load

Image page 1

Image page 2

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>

Answer 1

Answer is.

{{ (config.currentPage - 1) * config.itemsPerPage + i +1 }}

Answer 2

Something like

<th>{{(currentPage + 1) * itemsPerPage + i + 1}}</th>

should do what you want.

*ngFor doesn't know about your whole table, it only knows about the items of the current page (returned by _data | paginate)