Paginator component
The component <day-paginator> is a flexible UI element for navigating paginated data, offering customizable options and seamless integration with reactive Angular applications.
Dependencies
'/core', '/button', '/icon', '/dropdown'
Import
import { DAYPaginatorComponent } from '/paginator';
Selectors
Paginator: day-paginator
Installation and Usage
npm install @dayerlin-bustamante/paginatorimport { DAYPaginatorComponent } from '@dayerlin-bustamante/paginator';<day-paginator [totalItems]="100" [pageSize]="10"/>Inputs
| Name | Description | Default |
|---|---|---|
| itemsPerPage: number | Required. Number of items to display per page. | — |
| total: number | Required. Total number of items available for pagination. | — |
| itemsPerPageOptions: { value: number }[] | Optional. Array of selectable options for the number of items per page. | [] |
| maxPages: number | Optional. Maximum number of visible page buttons in the paginator. | 5 |
| page: number | Optional. Current active page number. | 1 |
Outputs
| Name | Description |
|---|---|
| paginationChanged: IPopoverConfiguration | Event emitted when the page or items per page changes, including page number, items per page, and skip count. |
Directives
Not included
Computes and internal events
| Name | Description | |
|---|---|---|
| copy() | Computed string showing the current range of items being displayed. | |
| firstDisabled() | Computed boolean indicating if the 'first page' button is disabled. | |
| lastDisabled() | Computed boolean indicating if the 'last page' button is disabled. |
Public methods
DAYDPaginatorAdapter
| Name | Description | Returns | Params |
|---|---|---|---|
| getPaginatorFirstAndLastCopies | Retrieves the copies for the first and last buttons of the paginator. | An object containing the copies for the first and last buttons. | |
| getPaginatorItemsCopy | Returns a string representing the range of items displayed. | A formatted string showing the range and total items. | firstItem: number, lastItem: number, total: number |
| goToFirstPageOnPageChange | Indicates whether to go to the first page when the page changes. | Boolean indicating if the paginator should reset to the first page on page change. |
Example
Description
The DAYPaginatorComponent is a customizable pagination component that enables navigation between pages of data within a user interface. It supports configurable items per page, direct page navigation, and a customizable maximum number of visible pages. The component uses Angular signals to maintain reactive internal state and emits events when the page or items per page change. It also dynamically adjusts its visual presentation using custom CSS properties and retrieves configurable text labels through an adapter, making it well-suited for multilingual or highly configurable environments.