Components

Paginator

Angular Material Paginator allows users to navigate through a collection of items divided into pages, typically used in lists, tables, or galleries. It shows the range that is currently on screen next to the total count, arrows to step back and forth, and optionally a menu of page sizes and buttons that jump to the first and the last page. BuilderKit restyles the controls, the labels and the page size menu so the mat-paginator component matches the rest of the design system.

Official docs API reference

Most paginators sit under a table, where the page size and the page index decide which rows are rendered.

Example

Below is an example of how BuilderKit restyles the Angular Material Paginator and gives it a more modern appearance.

1 – 20 of 200

<mat-paginator
  [length]="200"
  [pageSize]="20"
  [showFirstLastButtons]="true"
  [pageSizeOptions]="[5, 10, 15]" />

Choosing how many items are on a page

The page size menu lets the reader pick how many items a page holds, and the range label recalculates as soon as a new size is picked.

1 – 25 of 480

<mat-paginator
  [length]="480"
  [pageSize]="25"
  [pageSizeOptions]="[10, 25, 50, 100]" />

Compact paginator without the page size menu

Hiding the page size menu leaves only the range label and the two arrows, which fits narrow panels and cards.

1 – 10 of 60

<mat-paginator
  [length]="60"
  [pageSize]="10"
  [hidePageSize]="true" />