Constructor
# new PaginationComponent()
This component provides a user interface for paginated content navigation, displaying page numbers and navigation controls. It supports customizable page counts, current page tracking, and emits events when users navigate between pages.
The component intelligently handles large numbers of pages by showing a subset of page numbers with ellipses to indicate skipped pages, ensuring the UI remains clean and usable even with many pages.
A pagination component for navigating through multiple pages of content.
sequenceDiagram
participant U as User
participant P as PaginationComponent
participant E as External Component
U->>P: Click page number
P->>P: navigate(page)
P->>P: handleClick(direction, page)
P->>E: Emit clickEvent with IPaginationCustomEvent
U->>P: Click next button
P->>P: next()
P->>P: handleClick('next')
P->>E: Emit clickEvent with IPaginationCustomEvent
U->>P: Click previous button
P->>P: previous()
P->>P: handleClick('previous')
P->>E: Emit clickEvent with IPaginationCustomEvent
- Implements:
- OnInit
View Source lib/components/pagination/pagination.component.ts, line 65
Example
<ngx-decaf-pagination
[pages]="10"
[current]="3"
(clickEvent)="handlePageChange($event)">
</ngx-decaf-pagination>Extends
- NgxBaseComponentDirective
Classes
- PaginationComponent
- Initializes a new instance of the PaginationComponent.