Paginator controls pages of a dataset: tables, DataView screens, search results, record lists, and server-side browsing.
Use length for the total number of records, pageSize for records per page, pageIndex for the current zero-based page, and the page event to update local data or request the next page from an API.
Do not use Paginator for app route navigation, wizard steps, carousel slides, media browsing, or standalone UI without a paged dataset.
| Prop | Type | Default |
|---|---|---|
pageIndex The zero-based page index of the displayed list of items. Defaulted to 0. | number | 0 |
length The length of the total number of items that are being paginated. Defaulted to 0. | number | 0 |
pageSize Number of items to display on a page. By default set to 50. | number | 50 |
pageSizeOptions The set of provided page size options to display to the user. | number[] | [] |
hidePageSize Whether to hide the page size selection UI from the user. | boolean | false |
showFirstLastButtons Whether to show the first/last buttons UI to the user. | boolean | false |
disabled Whether the paginator is disabled. | boolean | false |
| Event | Description |
|---|---|
| page | Event emitted when the paginator changes the page size or page index. |
Using this component in production?
NgStarter includes source code, admin dashboard templates, and commercial support.