How To Set Serial Number In Mat-table Angular

How to set Serial Number in Mat-table angular.

To achieve serial number or row number in mat-table, we can use angular index variable provided by *ngFor directive. The *ngFor directive is used to iterate over an array and render a template for each item in the list or Array.

<tablemat-table[dataSource]="dataSource"class="mat-elevation-z8">
  <ng-container matColumnDef="sno">
   <th mat-header-cell*matHeaderCellDef class="th-header">S.No. </th>
   <td mat-cell*matCellDef="let element; let j = index"
   [ngClass]="element.status === 'REJECTED' ? 'rejected-status' : 'normal-status'">
    {{ (j+1) + (myPaginator.pageIndex * myPaginator.pageSize) }} </td>
 </ng-container>

 <ng-container matColumnDef="rollNo">
   <th mat-header-cell*matHeaderCellDef class="th-header">Roll No. </th>
   <td mat-cell*matCellDef="let element"> {{element.rollNo}} </td>
 </ng-container>

<ng-container matColumnDef="name">
  <th mat-header-cell*matHeaderCellDef class="th-header">Name </th>
  <td mat-cell*matCellDef="let element"> {{element.name}} </td>
</ng-container>

 <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
 <tr mat-row *matRowDef="let row; columns: displayedColumns;"(click)="selectRow(row)"></tr>
</table>
<div class="table-design">
 <mat-paginator #myPaginator [length]="totalElement"[pageSize]="10"[pageSizeOptions]="[10, 20, 30]"
   (page)="pageEvent=$event;">
 </mat-paginator>
</div>

PaginationComponent.js

import { Component, OnInit, ViewChild, AfterViewInit, TemplateRef } from '@angular/core';
import { MatPaginator, PageEvent } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
import { ApiService } from 'src/app/api.service';
import { Router } from '@angular/router';

export interface PeriodicElement{
rollNo:number;
name:string;
}

export class PaginationComponent implements OnInit, AfterViewInit {

loading:boolean=false;
dataSet:any= [];
displayedColumns:string[] = ['sno','rollNo', 'name'];
dataSource=newMatTableDataSource(this.dataSet);

page:number=0;
size:number=10;
totalElement:number;
pageEvent:PageEvent;
constructor(privateapiService:ApiService, privaterouter:Router) {}

ngOnInit() {
this.customerId=this.apiService.getCustomerId();
this.fetchPaginationData(this.customerId);
}

@ViewChild(MatPaginator) pagiNator : MatPaginator;
ngAfterViewInit(){
this.dataSource.paginator=this.pagiNator;
}
fetchPaginationData = function (customerId){

var fetchObject = {
   customerId :customerId,
   size :this.size,
   page :this.page,
}

this.dataSet= [];
this.dataSource=newMatTableDataSource(this.dataSet);
this.apiService.loadDataFromApi(fetchObject).subscribe( data=> {
letresponse=JSON.stringify(data);
letresp=JSON.parse(response);
if(resp.content!=null&&resp.content.paginationData != null && resp.content.paginationData.length > 0){
  this.totalElement=resp.content.totalElement;
  for(vari=0; i<resp.content.paginationData.length; i++){
   var tempData = resp.content.paginationData[i];
   this.dataSet.push({
      rollNo :tempData.admissionNo,
      name :tempData.firstName+" "+tempData.lastName 
   });
 }
 this.dataSource=newMatTableDataSource(this.dataSet);
}
});
}

onPaginateChange(event){
 this.size=event.pageSize;
 this.page=event.pageIndex;
 this.fetchAllStudent(this.customerId);
}
}