Angular Smart Pagination Component
Documentation and examples for showing Angular smart pagination to indicate a series of related content exists across multiple pages.
Overview
Angular smart pagination component consists of button-like styled links, that are arranged side by side in a horizontal list.
We use a large block of connected links for our pagination, making links hard to miss and easily scalable — all while providing large hit areas. SmartPagination is built with list HTML elements so screen readers can announce the number of available links. SmartPagination also role="navigation" to identify it as a navigation section to screen readers and other assistive technologies.
In addition, as pages likely have more than one such navigation section, SmartPagination provide a descriptive aria-label.
Features
- Determine behavior, style and functionality of pagination
- Smart automatic items generation
Examples
Selected: 2
Working with icons
Looking to use an icon or symbol in place of text for some pagination links? SmartPagination will provide screen reader support for 'firstButton', 'previousButton', 'nextButton' and 'lastButton'.
Sizing
Fancy larger or smaller pagination? Add size="lg" or size="sm" for additional sizes.
Alignment
Change the alignment of pagination components with align="start", align="center" or align="end" flexbox utilities.
API
SmartPagination Module
import { SmartPaginationModule } from '@coreui/angular';
@NgModule({
imports: [SmartPaginationModule,]
})
export class AppModule() { }
c-smart-pagination
component
Inputs
| name | description | type | default |
|---|---|---|---|
activePage | Current page number | number | 1 |
arrows | Show/hide arrows | boolean | true |
doubleArrows | Show double arrows buttons | boolean | true |
dots | Show dots | boolean | true |
firstButton | The content of first button | string | « |
lastButton | The content of last button | string | » |
limit | Maximum items number | number | 5 |
pages | Number of pages | number | 1 |
nextButton | The content of next button | string | › |
previousButton | The content of prev button | string | ‹ |
size | Size of pagination | sm, lg | '' |
role | role attr | string | navigation |
Outputs
| name | description | type |
|---|---|---|
activePageChange | Event emitted on activePage change | number |