title: Why on implementing 2 Mat-Table on same page Row color change and paginator not working?
body: <p>I have tried changing the color of row on edit click event with below code and is working fine</p>
  
  <pre><code>  &lt;table mat-table [dataSource]="dataSourceUsersTbl" class=" full-width users-grid" matSort&gt;
      &lt;ng-container matColumnDef="fullname"&gt;
      &lt;th mat-header-cell *matHeaderCellDef class="fullName-col" mat-sort-header&gt; Full Name &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let element" class="fullName-col"&gt; {{element.fullname}} &lt;/td&gt;
       &lt;/ng-container&gt;
        &lt;ng-container matColumnDef="action"&gt;
        &lt;th mat-header-cell *matHeaderCellDef class="action-col"&gt; Actions &lt;/th&gt;
        &lt;td mat-cell *matCellDef="let element" class="action-col"&gt;
          &lt;button mat-icon-button matTooltip="Edit" (click)="openEditDialog(element)"&gt;
         &lt;i class="material-icons"&gt;edit&lt;/i&gt;
          &lt;/button&gt;          
         &lt;/td&gt;
         &lt;/ng-container&gt;
       &lt;tr mat-header-row *matHeaderRowDef="displayedColumnsUsers; sticky: false"&gt;&lt;/tr&gt;
       &lt;tr mat-row *matRowDef="let row; columns: displayedColumnsUsers;" 
      [ngClass]="{ row-edited': selectedRowIndex == element.userid}"&gt;&lt;/tr&gt;
     &lt;/table&gt;
     &lt;mat-paginator #MatPaginator1 [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons class="dino-grid-paging"&gt;
      &lt;/mat-paginator&gt;
  </code></pre>
  
  <p>but when I add the second mat-table in same page it give issue as below</p>
  
  <pre><code>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)
  </code></pre>
  
  <p>also in 1st paginator grid it give row count of second grid row.</p>
  
  <p>In component side I have also tried doing some code as below and distinquish them with MatPaginator1 and MatPaginator2 but still not working</p>
  
  <pre><code>@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;
  }
  </code></pre>
  
  <p>On edit click the color should change with giving issue and pagination should work well and sorting in second grid not working</p>
  
  <p>Note : this issue arise when i implement 2 mat-table in one page, on applying single mat-table my things work fine.</p>
  
  <p>For more information please review this link
  <a href="https://stackblitz.com/edit/angular-c79ptl" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-c79ptl</a></p>