CoreUI Angular Logo
Framework:
  • JavaScript / Vanilla JS
  • React.js
  • Vue.js
Getting startedIntroductionSupport CoreUICustomizeSassOptionsCSS VariablesLayoutBreakpointsContainersGridColumnsGuttersFormsOverviewDate PickerPRODate Range PickerPROForm ControlSelectMulti SelectPROChecks & RadiosPassword InputPRORangeRange SliderPRORatingPROStepperPROInput GroupFloating LabelsLayoutTime PickerPROValidationComponentsAccordionAlertAvatarBadgeBreadcrumbButtonButton GroupCalendarPROCalloutCardCarouselClose buttonCollapseDropdownFooterHeaderImageList GroupLoading ButtonPROModalNavNavbarOffcanvasPaginationPlaceholderPopoverProgressSmart PaginationPROSmart TablePROSidebarSpinnerTableTabsNewToastTooltipWidgetsIconsChartsTemplatesNewAdmin & DashboardDownloadInstallationCustomizeContentMigrationv4 → v5v3 → v4Angular version


DownloadHire UsGet CoreUI PRO
On this page
CoreUI PRO for Angular 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. Get CoreUI PRO

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

Loading...
Loading...

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

Loading...

Sizing

Fancy larger or smaller pagination? Add size="lg" or size="sm" for additional sizes.

  • ...
Loading...
  • ...
Loading...

Alignment

Change the alignment of pagination components with align="start", align="center" or align="end" flexbox utilities.

  • ...
Loading...
  • ...
Loading...

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
  • GitHub
  • Twitter
  • Support
  • CoreUI (Vanilla)
  • CoreUI for React.js
  • CoreUI for Vue.js

CoreUI for Angular is Open Source UI Components Library for Angular.

Currently v5.5.2 Code licensed MIT , docs CC BY 3.0 .
CoreUI PRO requires a commercial license.