title: Angular Material Multiple Paginator in same Component and View
body: <p>Have 2 tables in view and displaying some graphs along with the tables, everything works except  the paginator on 2 tables. , which takes data from 2 sources.   When the Paginator of upper table clicked  the lower table changes the data, </p>
  
  <p>component have initialized the paginator and tables with data sources, </p>
  
  <blockquote>
    <p>My Component.ts</p>
  </blockquote>
  
  <pre><code>  export class FinancialMetricsComponent implements OnInit, AfterViewInit {
  
    pageSize = 20;
    dataSource: MatTableDataSource&lt;SnowTicket&gt; | null;
    utilizationDataSource: MatTableDataSource&lt;Utilization&gt; | null;
  
    @ViewChildren(MatPaginator) paginator = new QueryList&lt;MatPaginator&gt;();
    @ViewChildren(MatSort) sort = new QueryList&lt;MatSort&gt;();
  
  
  
  
  ngOnInit() {
  
      this.changeDataAccordingToDate();
      this.dataSource = new MatTableDataSource();
      this.data$.pipe(
        filter(Boolean)
      ).subscribe((tickets) =&gt; {
        this.accountsData = tickets;
        this.dataSource.data = tickets;
      });
  
      this.pcsService.getUtilizationData('120').subscribe(resources =&gt; {
        this.utilizationSubject$.next(resources);
      });
      this.utilizationDataSource = new MatTableDataSource();
      this.utilizationData$.pipe(
        filter(Boolean)
      ).subscribe((tickets) =&gt; {
        this.utilizationData = tickets;
        this.utilizationDataSource.data = tickets;
      });
    }
  
  
    ngAfterViewInit(): void {
      this.dataSource.paginator = this.paginator.toArray()[0];
      this.dataSource.sort = this.sort.toArray()[0];
  
      this.utilizationDataSource.paginator = this.paginator.toArray()[1];
      this.utilizationDataSource.sort = this.sort.toArray()[1];
  
      }
  }
  </code></pre>
  
  <p>In view here only added the tables, that have the paginators.   When the paginator in upper has table removed the lower table paginator works. else only the upper paginator works, when it clicked the lower table changes data, </p>
  
  <blockquote>
    <p>View.html</p>
  </blockquote>
  
  <pre><code>&lt;fury-list name="AWS Resources Expenditure" [columns]="columns" (filterChange)="onFilterChange($event)"&gt;
    &lt;mat-table #table [dataSource]="dataSource" matSort&gt;
      &lt;ng-container *ngFor="let column of columns"&gt;
        &lt;ng-container *ngIf="column.notCurrency" [matColumnDef]="column.property"&gt;
          &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; {{ column.name }}&lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef="let row"&gt;
            &lt;span class="fury-mobile-label"&gt;{{ column.name }}&lt;/span&gt; {{ row[column.property] }}
          &lt;/mat-cell&gt;
        &lt;/ng-container&gt;
        &lt;ng-container *ngIf="!column.notCurrency" [matColumnDef]="column.property"&gt;
          &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; {{ column.name }}&lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef="let row"&gt;
            &lt;span class="fury-mobile-label"&gt;{{ column.name }}&lt;/span&gt; {{ row[column.property] | currency }}
          &lt;/mat-cell&gt;
        &lt;/ng-container&gt;
      &lt;/ng-container&gt;
      &lt;mat-header-row *matHeaderRowDef="visibleColumns"&gt;&lt;/mat-header-row&gt;
      &lt;mat-row *matRowDef="let row; columns: visibleColumns;"&gt;&lt;/mat-row&gt;
    &lt;/mat-table&gt;
    &lt;mat-paginator #paginator class="paginator" [pageSize]="10"&gt;&lt;/mat-paginator&gt;
  &lt;/fury-list&gt;
  
  
  
  &lt;fury-list name="AWS EC2 Utilization (Past 120 days)" [columns]="utilizationColumns" (filterChange)="onFilterChangeU($event)"&gt;
    &lt;mat-table #table [dataSource]="utilizationDataSource" matSort&gt;
  
      &lt;ng-container *ngFor="let column of utilizationColumns"&gt;
        &lt;ng-container *ngIf="!column.isAvg" [matColumnDef]="column.property"&gt;
          &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; {{ column.name }}&lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef="let row"&gt;
            &lt;span class="fury-mobile-label"&gt;{ { column.name }}&lt;/span&gt; {{ row[column.property] }}
          &lt;/mat-cell&gt;
        &lt;/ng-container&gt;
        &lt;ng-container *ngIf="column.isAvg" [matColumnDef]="column.property"&gt;
          &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; {{ column.name }}&lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef="let row"&gt;
            &lt;span class="fury-mobile-label"&gt;{{ column.name }}&lt;/span&gt; {{ row[column.property]}}
            &lt;mat-icon *ngIf="row[column.property] &lt; 10"&gt; trending_down&lt;/mat-icon&gt;
            &lt;mat-icon *ngIf="row[column.property] &gt; 70"&gt; trending_up&lt;/mat-icon&gt;
          &lt;/mat-cell&gt;
        &lt;/ng-container&gt;
      &lt;/ng-container&gt;
  
      &lt;mat-header-row *matHeaderRowDef="visibleColumnsU"&gt;&lt;/mat-header-row&gt;
      &lt;mat-row *matRowDef="let row; columns: visibleColumnsU;"&gt;&lt;/mat-row&gt;
    &lt;/mat-table&gt;
    &lt;mat-paginator #paginatorU class="paginator" [pageSize]="5"&gt;&lt;/mat-paginator&gt;
  &lt;/fury-list&gt;
  </code></pre>