Import
import { PaginationModule } from '@backbase/ui-ang/pagination'
Usage
Use the bb-pagination-ui component to display pagination controls. The component only renders when itemsPerPage is less than totalItems.
<!-- Basic pagination usage -->
<bb-pagination-ui
[totalItems]="100"
[itemsPerPage]="10"
[page]="currentPage"
(pageChange)="onPageChange($event)">
</bb-pagination-ui>
Inputs
|
Input |
Type |
Default |
|---|---|---|
|
boundaryLinks |
boolean |
false |
|
directionLinks |
boolean |
false |
|
itemsPerPage |
number |
10 |
|
maxNavPages |
number |
5 |
|
page |
number |
1 |
|
totalItems |
number |
0 |
boundaryLinks
The boundaryLinks input determines whether to show "First" and "Last" page navigation buttons. On mobile screens (XSmall breakpoint), boundary links are automatically hidden regardless of this setting.
<!-- Pagination with first and last buttons -->
<bb-pagination-ui
[totalItems]="100"
[itemsPerPage]="10"
[boundaryLinks]="true">
</bb-pagination-ui>
directionLinks
The directionLinks input determines whether to show "Previous" and "Next" page navigation buttons.
<!-- Pagination with previous and next buttons -->
<bb-pagination-ui
[totalItems]="100"
[itemsPerPage]="10"
[directionLinks]="true">
</bb-pagination-ui>
itemsPerPage
The itemsPerPage input sets the number of items displayed per page. The component only renders when this value is less than totalItems.
<!-- Pagination showing 25 items per page -->
<bb-pagination-ui
[totalItems]="100"
[itemsPerPage]="25">
</bb-pagination-ui>
maxNavPages
The maxNavPages input sets the maximum number of page navigation buttons to display. On mobile screens (XSmall breakpoint), this value is automatically reduced to 1 to save space.
<!-- Pagination with up to 7 page buttons -->
<bb-pagination-ui
[totalItems]="200"
[itemsPerPage]="10"
[maxNavPages]="7">
</bb-pagination-ui>
page
The page input sets the current page. The component uses 0-indexed values internally but displays pages as 1-indexed to users.
<!-- Pagination starting at page 3 -->
<bb-pagination-ui
[totalItems]="100"
[itemsPerPage]="10"
[page]="2">
</bb-pagination-ui>
totalItems
The totalItems input sets the total number of items in the dataset. Page numbers are calculated dynamically based on this value and itemsPerPage. The component only renders when itemsPerPage is less than this value.
<!-- Pagination for 500 total items -->
<bb-pagination-ui
[totalItems]="500"
[itemsPerPage]="10">
</bb-pagination-ui>
Outputs
|
Output |
Type |
Description |
|---|---|---|
|
pageChange |
EventEmitter<number> |
Fired when the user navigates to a different page. Emits the new page number (0-indexed). Only fires when collection size is set and all values are valid |
Accessibility
This component is built with accessibility in mind. See the information below for supported behaviors and configuration options to ensure a fully accessible experience for all users.
- ARIA labels: All navigation buttons include appropriate ARIA labels for screen readers
- Keyboard navigation: Full keyboard support for all interactive elements with logical tab order
- Screen reader support: Current page and navigation context are properly announced
- Focus management: Clear focus indicators and proper focus handling
- Disabled state handling: Navigation controls are properly disabled and communicated when unavailable (e.g., "Previous" on first page, "Next" on last page)
The component automatically handles responsive behavior, hiding boundary links and reducing the number of visible page buttons on small screens to maintain accessibility and usability.