Are you ready for Cyber ~~Monday~~ Week Deals?

Extra 25% off for all sale items + Free CoreUI Icons PRO with every order! Limited offer for the first 100 people, use code 2024BWCW25 during checkout.

On this page

This Component is a part of CoreUI PRO for Angular, an advanced UI library offering over 100 components designed for creating responsive, sleek, and powerful applications. Experience it yourself by signing up for a complimentary 7-day trial.

Start Free Trial

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