How to change Row Index Number of p-table on clicking change event of paginator in primeNg

I am using p-table for listing products .In the table am giving serial number for products as follows:

<ng-template pTemplate="body" let-rowIndex="rowIndex" let-prodList >
                                        <tr>
                                            <td >{{rowIndex+1}}</td>
                                            <td>{{prodList.name}}</td>
                                            <td>{{prodList .color}}</td>
                                          </tr>
</ng-template>  

Its working for 1st page. But when I click any other page , it again shows number from 1 not the continuation of its last page .

Code for Pagination is as follows:

<p-paginator [rows]="10" [totalRecords]="totalRecords" [rowsPerPageOptions]="[10,20,30]" (onPageChange)="paginate($event)"></p-paginator>

    paginate(event) {
    
    this.loading = true;
    this.first = event.first;
    let pageIndex = event.first/event.rows + 1; 
    let size = event.rows;
    this.getPage(pageIndex,size)
    
}

getPage(pageId,size) {
    this.service.getProduct(page,size).subscribe(
          data => this.getProdList(data),
          error => console.log(error)
      );
  }

getProdList(data){
    this.prodList = data.list; 
         this.totalRecords = data.totalRows;
}

Code in service :

getProduct(pageId,size) {
    const path = this.url + '/products';
    const data = {'size':size,'page':pageId};
    return this.http.post(path,data,{headers});
  }

How can I solve this issue. Someone please help me.

I got the answer by changing the html as follows :

<ng-template pTemplate="body" let-rowIndex="rowIndex" let-prodList >
                                        <tr>
                                            <td >{{first+rowIndex+1}}</td>
                                            <td>{{prodList.name}}</td>
                                            <td>{{prodList .color}}</td>
                                          </tr>
</ng-template>