Why on implementing 2 Mat-Table on same page Row color change and paginator not working?

Question

I have tried changing the color of row on edit click event with below code and is working fine

  <table mat-table [dataSource]="dataSourceUsersTbl" class=" full-width users-grid" matSort>
    <ng-container matColumnDef="fullname">
    <th mat-header-cell *matHeaderCellDef class="fullName-col" mat-sort-header> Full Name </th>
    <td mat-cell *matCellDef="let element" class="fullName-col"> {{element.fullname}} </td>
     </ng-container>
      <ng-container matColumnDef="action">
      <th mat-header-cell *matHeaderCellDef class="action-col"> Actions </th>
      <td mat-cell *matCellDef="let element" class="action-col">
        <button mat-icon-button matTooltip="Edit" (click)="openEditDialog(element)">
       <i class="material-icons">edit</i>
        </button>          
       </td>
       </ng-container>
     <tr mat-header-row *matHeaderRowDef="displayedColumnsUsers; sticky: false"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumnsUsers;" 
    [ngClass]="{ row-edited': selectedRowIndex == element.userid}"></tr>
   </table>
   <mat-paginator #MatPaginator1 [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons class="dino-grid-paging">
    </mat-paginator>

but when I add the second mat-table in same page it give issue as below

UsersMasterComponent.html:61 ERROR TypeError: Cannot read property   'userid' of undefined
at Object.eval [as updateDirectives] (UsersMasterComponent.html:62)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:23910)
at checkAndUpdateView (core.js:23306)
at callViewAction (core.js:23547)
at execEmbeddedViewsAction (core.js:23510)
at checkAndUpdateView (core.js:23307)
at callViewAction (core.js:23547)
at execComponentViewsAction (core.js:23489)
at checkAndUpdateView (core.js:23312)
at callViewAction (core.js:23547)

also in 1st paginator grid it give row count of second grid row.

In component side I have also tried doing some code as below and distinquish them with MatPaginator1 and MatPaginator2 but still not working

@ViewChild('MatSort1') MatSort1: MatSort;
@ViewChild('MatPaginator1') MatPaginator1: MatPaginator;
@ViewChild('MatSort2') MatSort2: MatSort;
@ViewChild('MatPaginator2') MatPaginator2: MatPaginator;


ngOnInit() {
  this.dataSourceUsersTbl.sort = this.MatSort1;
  this.dataSourceUsersTbl.paginator = this.MatPaginator1;
  this.dataSourceAssignPermission.sort = this.MatSort1;
  this.dataSourceAssignPermission.paginator = this.MatPaginator2;
}

On edit click the color should change with giving issue and pagination should work well and sorting in second grid not working

Note : this issue arise when i implement 2 mat-table in one page, on applying single mat-table my things work fine.

For more information please review this link https://stackblitz.com/edit/angular-c79ptl

@Vato I have tred setting in stackblitz Can I have your email, I can send u the html file — mitesh jain
@Vato please review this link stackblitz.com/edit/angular-c79ptl — mitesh jain

Vato Vato · Accepted Answer · 2019-04-11T11:03:38

try calling element in second table element2 or some other name than the first element. Not to have the same problem I would put each table in separate component and give the data required with @Input property.

Here you go: https://stackblitz.com/edit/angular-5fvdgj

you had to only write

@ViewChild('MatPaginator1') paginator: MatPaginator;

you have to do the same for MatPaginator2

and in html in front of MatPaginator1 you need # so that angular can find it by Id. you dont need

@ViewChild(MatPaginator1) paginator: MatPaginator;

without ' ' is unnecessary.

You need to do the same for sort. But, Instead of #sort1 you need to write #matSort1="matSort" same for sort 2.

Why on implementing 2 Mat-Table on same page Row color change and paginator not working?

2 Answers