Paginator does not work when it has two tables in angular material

Question

I have two query screens where I load the data in a materialtable with angular and use the pagination, however, only one is working properly, apparently, Paginator is always loading the last one. I need to make it work for both tables. HTML table 1:

<mat-table [dataSource]="dataSourceCfg" matSort>

      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
        <td mat-cell *matCellDef="let cfg">{{cfg.id}}</td>
      </ng-container>

      <ng-container matColumnDef="planta">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Planta</th>
        <td mat-cell *matCellDef="let cfg">{{cfg.planta}}</td>
      </ng-container>

      <ng-container matColumnDef="linha">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Linha</th>
        <td mat-cell *matCellDef="let cfg">{{cfg.linha}}</td>
      </ng-container>

      <ng-container matColumnDef="plantaReduzida">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>P.reduzida</th>
        <td mat-cell *matCellDef="let cfg">{{cfg.plantaReduzida}}</td>
      </ng-container>

      <ng-container matColumnDef="opcoes">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Opções</th>
        <td mat-cell *matCellDef="let cfg">
          <button mat-raised-button color="primary" tooltip="Selectionar" (click)="dadosSelecionadoConf(cfg)"><mat-icon>create</mat-icon></button>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumnsCFG"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumnsCFG;"></tr>

    </mat-table>
    <mat-paginator [pageSize]="5" [pageSizeOptions]="[5]" [showFirstLastButtons]="true"></mat-paginator>

HTML table 2

<mat-table [dataSource]="dataSourceABV">

        <ng-container matColumnDef="id">
          <th mat-header-cell *matHeaderCellDef>Id</th>
          <td mat-cell *matCellDef="let abv">{{abv.id}}</td>
        </ng-container>

        <ng-container matColumnDef="pProdMes">
          <th mat-header-cell *matHeaderCellDef>P.ProdMes</th>
          <td mat-cell *matCellDef="let abv">{{abv.pProdMes}}</td>
        </ng-container>

        <ng-container matColumnDef="nomPlaniControl">
          <th mat-header-cell *matHeaderCellDef>N. Planilha Control</th>
          <td mat-cell *matCellDef="let abv">{{abv.nomPlaniControl}}</td>
        </ng-container>

        <ng-container matColumnDef="codItemPlanilha">
          <th mat-header-cell *matHeaderCellDef>Cod. Item planilha</th>
          <td mat-cell *matCellDef="let abv">{{abv.codItemPlanilha}}</td>
        </ng-container>

        <ng-container matColumnDef="nomeItemControle">
          <th mat-header-cell *matHeaderCellDef>Nome Item Controle</th>
          <td mat-cell *matCellDef="let abv">{{abv.nomeItemControle}}</td>
        </ng-container>

        <ng-container matColumnDef="opcoes">
          <th mat-header-cell *matHeaderCellDef>Opções</th>
          <td mat-cell *matCellDef="let abv">
            <button mat-raised-button color="primary" tooltip="Selectionar" (click)="dadosSelecionadoAbv(abv)"><mat-icon>create</mat-icon></button>  
          </td>
        </ng-container>            

        <tr mat-header-row *matHeaderRowDef="displayedColumnsABV"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumnsABV;"></tr>

      </mat-table>
      <mat-paginator [pageSize]="5" [pageSizeOptions]="[5]" [showFirstLastButtons]="true"></mat-paginator>

and in typescript:

@ViewChild(MatPaginator, {static: true}) paginatorABV: MatPaginator;
@ViewChild(MatPaginator, {static: true}) paginatorCFG: MatPaginator;

  constructor(
  private fb: FormBuilder,
  private toastr: ToastrService,
  private router: ActivatedRoute,
  private dialog: MatDialog,
  private snackBar: MatSnackBar,
  private route: Router,
  private configuracaoService: ConfiguracoesService,
  private ambevService: AmbevsService,
  private plcService: PLCService,
  private tvService: TVariaveisService,
  private umService: UMsService,
  private historianService: HistoriansService
  ) {
  this.route = route;
  this.getConfiguracao();
  this.getAmbev();
  this.getPLC();
 }

  getAmbev() {
      this.ambevService.getAllAmbev().subscribe(
        (_ambevs: Ambev[]) => {
          this.ambevs = _ambevs;
          this.ambevFiltrada = this.ambevs;
          this.dataSourceABV = new MatTableDataSource(this.ambevs);
          this.dataSourceABV.paginator = this.paginatorABV;
        },
        error => {
          console.log(error);
        }
      );
    }
    getConfiguracao() {
      this.configuracaoService.getAllConfiguracao().subscribe(
        (_configuracoes: Configuracao[]) => {
          this.configuracoes = _configuracoes;
          this.configuracoesFiltradas = this.configuracoes;
          this.dataSourceCfg = new MatTableDataSource(this.configuracoes);
          this.dataSourceCfg.paginator = this.paginatorCFG;
        },
        error => {
          console.log(error);
        }
      );
    }

When running only one table, the program works. How can I fix this?

Answer 1

The Viewchild of paginatorABV and paginatorCFG are referencing the same Matpaginator.

When it is so, it is better to name the tags by id.

In HTML it would look like this:

<mat-paginator #paginatorABV [pageSize]="5" [pageSizeOptions]="[5]" [showFirstLastButtons]="true"></mat-paginator>

<mat-paginator #paginatorCFG [pageSize]="5" [pageSizeOptions]="[5]" [showFirstLastButtons]="true"></mat-paginator>

In TS would look like this:

@ViewChild('paginatorABV') paginatorABV: MatPaginator;
@ViewChild('paginatorCFG') paginatorCFG: MatPaginator;

I also recommend you to make the pagination according to backend.