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 ahorizontal list.
We use a large block of connected links for our pagination, making links hard to miss and easily scalable — all whileproviding large hit areas. SmartPagination is built with list HTML elements so screen readers can announce thenumber of available links. SmartPagination also role="navigation" to identify it as a navigation sectionto screen readers and other assistive technologies.
In addition, as pages likely have more than one such navigation section, SmartPagination provide a descriptivearia-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 screenreader support for 'firstButton', 'previousButton', 'nextButton' and 'lastButton'.
Sizing
Fancy larger or smaller pagination? Addsize="lg" orsize="sm" for additional sizes.
Alignment
Change the alignment of pagination components withalign="start",align="center" oralign="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 onactivePage change | number |