On this page

This component is part of CoreUI PRO – a powerful UI library with over 250 components and 25+ templates, designed to help you build modern, responsive apps faster. Fully compatible with Angular, Bootstrap, React.js, and Vue.js.

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 ---

--- ### 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](https://coreui.io/docs/utilities/flex/).

--- ## API ### SmartPagination Module

 ```typescript
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` |