@styloviz/pagination

Smart page-window with ellipsis, a page-size selector, 3 variants and 3 sizes.

Part of the Styloviz UI Kit — a premium Angular 21 + Tailwind CSS 4 dashboard component library. Standalone, OnPush, strongly typed, dark-mode ready.

Installation

npm install @styloviz/pagination

Requires @angular/core and @angular/common >= 21. Self-contained — no other Styloviz packages required. Prefer everything at once? @styloviz/all installs the whole free tier in one command.

Usage

import { SvPaginationComponent } from '@styloviz/pagination';

@Component({
  standalone: true,
  imports: [SvPaginationComponent],
  template: `
    <sv-pagination [totalItems]="240" [pageSize]="20" [currentPage]="page" (pageChange)="page = $event" />
  `,
})
export class DemoComponent {}

Inputs

| Input | Type | Default | Description | | --- | --- | --- | --- | | totalItems | number | 0 | Total number of items across all pages. | | pageSize | number (two-way) | 10 | Number of items per page. Use [(pageSize)] for two-way binding. | | currentPage | number (two-way) | 1 | 1-based current page index. Use [(currentPage)] for two-way binding. | | pageSizeOptions | number[] | [10, 25, 50, 100] | Options shown in the page-size <select>. Empty array hides the selector entirely. | | variant | PaginationVariant | 'default' | Visual variant. | | size | PaginationSize | 'md' | Control size. | | showSummary | boolean | true | Show total-item count summary (e.g. "Showing 1–10 of 234"). | | ariaLabel | string | 'Pagination' | Accessible label for the navigation landmark. | | customClass | string | '' | Additional CSS classes on the root wrapper. |

Outputs

| Output | Type | Description | | --- | --- | --- | | pageChange | number | Emitted when the user navigates to a different page. |

Documentation

Full API reference and live demos: https://styloviz.dev/docs/pagination

License

MIT