Documentation and examples for showing Angular smart pagination to indicate a series of related content exists across multiple pages.
Available in Other JavaScript Frameworks
CoreUI Angular Smart Pagination Component is also available for React and Vue. Explore framework-specific implementations below:
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
import { Component, signal } from '@angular/core';
import { SmartPaginationComponent } from '@coreui/angular';
@Component({
selector: 'docs-smart-pagination-example',
templateUrl: './smart-pagination-example.component.html',
imports: [SmartPaginationComponent]
})
export class SmartPaginationExampleComponent {
readonly activePage = signal(2);
}<c-smart-pagination [(activePage)]="activePage" [pages]="9" />
<p class="form-text">Selected: {{ activePage() }}</p>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’.
import { Component } from '@angular/core';
import { SmartPaginationComponent } from '@coreui/angular';
@Component({
selector: 'docs-smart-pagination-working-with-icons',
templateUrl: './smart-pagination-working-with-icons.component.html',
styleUrls: ['./smart-pagination-working-with-icons.component.scss'],
imports: [SmartPaginationComponent]
})
export class SmartPaginationWorkingWithIconsComponent {}<c-smart-pagination
[activePage]="2"
[pages]="9"
[dots]="false"
firstButton="First"
lastButton="Last"
nextButton="Next"
previousButton="Prev">
</c-smart-pagination>Sizing
Fancy larger or smaller pagination? Add size=“lg” or size=“sm” for additional sizes.
import { Component } from '@angular/core';
import { SmartPaginationComponent } from '@coreui/angular';
@Component({
selector: 'docs-smart-pagination-sizing-large',
templateUrl: './smart-pagination-sizing-large.component.html',
styleUrls: ['./smart-pagination-sizing-large.component.scss'],
imports: [SmartPaginationComponent]
})
export class SmartPaginationSizingLargeComponent {}<c-smart-pagination
[activePage]="2"
[pages]="9"
size="lg">
</c-smart-pagination>import { Component } from '@angular/core';
import { SmartPaginationComponent } from '@coreui/angular';
@Component({
selector: 'docs-smart-pagination-sizing-small',
templateUrl: './smart-pagination-sizing-small.component.html',
styleUrls: ['./smart-pagination-sizing-small.component.scss'],
imports: [SmartPaginationComponent]
})
export class SmartPaginationSizingSmallComponent {}<c-smart-pagination
[activePage]="2"
[pages]="9"
size="sm">
</c-smart-pagination>Alignment
Change the alignment of pagination components with align=“start”, align=“center” or align=“end” flexbox utilities.
import { Component } from '@angular/core';
import { SmartPaginationComponent } from '@coreui/angular';
@Component({
selector: 'docs-smart-pagination-alignment-center',
templateUrl: './smart-pagination-alignment-center.component.html',
styleUrls: ['./smart-pagination-alignment-center.component.scss'],
imports: [SmartPaginationComponent]
})
export class SmartPaginationAlignmentCenterComponent {}<c-smart-pagination
[activePage]="2"
[pages]="9"
align="center">
</c-smart-pagination>import { Component } from '@angular/core';
import { SmartPaginationComponent } from '@coreui/angular';
@Component({
selector: 'docs-smart-pagination-alignment-end',
templateUrl: './smart-pagination-alignment-end.component.html',
styleUrls: ['./smart-pagination-alignment-end.component.scss'],
imports: [SmartPaginationComponent]
})
export class SmartPaginationAlignmentEndComponent {}<c-smart-pagination
[activePage]="2"
[pages]="9"
align="end">
</c-smart-pagination>API
SmartPagination Module
import { SmartPaginationModule } from '@coreui/angular';
@NgModule({
imports: [SmartPaginationModule,]
})
export class AppModule() { }c-smart-pagination
component
import { SmartPaginationComponent } from '@coreui/angular-pro'