Angular - mat-paginator not appearing for mat-table

Question

Using Angular 12, I've imported mat-paginator with

import { MatPaginator } from '@angular/material/paginator';  

and in export I've tried

@ViewChild('paginator') paginator: MatPaginator;

and

@ViewChild(MatPaginator, {read: true}) paginator: MatPaginator;

in the component.ts.

In the HTML, I have:

<mat-table>
  ...
  <mat-paginator #paginator [pageSizeOptions]="[2, 4, 6, 8, 100]" showFirstLastButtons></mat-paginator>
    
</mat-table>

The table populates (with a non-formatted header) and the paginator does not appear. I don't see any error messages. I'm at a bit of a loss.

Answer 1

According to Mat Table Pagination, mat-paginator element is not in mat-table element.

SOLUTION

You need to move out mat-paginator element from mat-table element.

The HTML template should be looked like below:

<div>
  <mat-table>
    ...
  </mat-table>

  <mat-paginator #paginator [pageSizeOptions]="[2, 4, 6, 8, 100]" showFirstLastButtons></mat-paginator>
</div>

Sample solution on StackBlitz