MatPaginator is an Angular Material component that adds pagination controls to table data. It provides a tested alternative to writing pagination manually, but works best with the library’s predefined data-source model. section 28.2.2
Use MatPaginator with the Angular Material table workflow:
- Import MatPaginatorModule alongside MatTableModule; include animation support when required by the table features. section 28.2.2
- Place the mat-paginator component with the table and associate it with a MatTableDataSource<Product> instance. section 28.2.2
- Assign the paginator and sorting directive to the data source after child ViewChild properties are available, such as in ngAfterViewInit. section 28.2.2
Paginated product table
A product table uses MatTableDataSource<Product> for its data, MatPaginator for page navigation, and MatSort for price-column sorting. Repository data updates the data property, while the paginator and sort properties connect the controls to the displayed rows. section 28.2.2
Listing 28.13. Enhancing the table in the table.component.html file in the src/app/core folder
<table mat-table [dataSource]="DataSource" matSort>
<mat-text-column name="id"></mat-text-column>
<mat-text-column name="name"></mat-text-column>
<mat-text-column name="category"></mat-text-column>
<ng-container matColumnDef="price">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Price</th>
<td mat-cell *matCellDef="let item">
{{item.price | currency:"USD"}}
</td>
</ng-container>
<ng-container matColumnDef="buttons">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let item">
<button mat-flat-button color="accent"
(click)="deleteProduct(item.id)">
Delete
</button>
<button mat-flat-button color="warn"
[routerLink]="['/form', 'edit', item.id]">
Edit
</button>
</ng-container>
<tr mat-header-row *matHeaderRowDef="colsAndRows"></tr>
<tr mat-row *matRowDef="let row; columns: colsAndRows"></tr>
</table>
<mat-paginator [pageSize]="5" [pageSizeOptions]="[3, 5, 10]">
</mat-paginator>
<div class="p-2 text-center">
<button mat-flat-button color="primary" routerLink="/form/create"
[disabled]="isServer">
Create New Product
</button>
</div>
Inspect the table template that enables matSort and prepares the table for integrated pagination. section 28.2.2
