Get object array index number and add it to mat-table with other data of the object

Question

I'm trying to get the index number of each element add it to the particular row with data. I have used *matCellDef="let element; let i = index" and it doesn't work well with the mat-paginator.

Expected Result:

component.ts

getNotifications(){     
    this.notificationService.getNotifications()
            .pipe(first())
            .subscribe(
                data => {
                  this.notifications = <Notification[]>data;
                  this.dataSource = new MatTableDataSource();
                  this.dataSource.data = data;
                  this.dataSource.paginator = this.paginator;
                },
                error => {
                  console.log("An Error Occurred");
                });
  }

Please check if this helps. https://stackoverflow.com/questions/50292349/get-index-of-row-in-angular-material-table-v5 — Angela Amarapala, Feb 02 '20 at 17:28
@AngelaAmarapala Thanks. It helped. Not the confirmed answer though. I used {{dataSource.filteredData.indexOf(element)}} because I'm using mat-paginator. — ONE_FE, Feb 02 '20 at 17:41

score 0 · Answer 1 · answered Feb 02 '20 at 21:05

indexing is only work with current items that are showing on the page. you need to create a formula with pagesize and pageindex like {{(i)+(pageEvent.pageSize*pageEvent.pageIndex)}}

you will get size and index value from pagination using **pageEvent **

<mat-paginator #paginator
                 [pageSize]="10"
                 [pageSizeOptions]="[5, 10, 20]"
                 [showFirstLastButtons]="true"
                 (page)="pageEvent = $event">

click here for demo

Get object array index number and add it to mat-table with other data of the object

1 Answers1