import { Component, ChangeDetectionStrategy, signal } from '@angular/core'; import { CommonModule } from '@angular/common'; import { PaginationComponent } from '../../../../../ui-essentials/src/lib/components/navigation/pagination/pagination.component'; @Component({ selector: 'ui-pagination-demo', standalone: true, imports: [CommonModule, PaginationComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `

Pagination Component Showcase

Sizes

Small

Medium (Default)

Large

Alignment

Left Aligned

Center Aligned (Default)

Right Aligned

With Page Information

Basic Page Info

With Items Count

Without Info

Compact Style

Compact Pagination

Compact with Labels

Different Page Counts

Few Pages (5 total)

Many Pages (50 total)

Limited Visible Pages (maxVisible=5)

Labels and States

With Navigation Labels

Custom ARIA Labels

Disabled State

Interactive Pagination

Controlled Pagination

@if (lastPageChange) {
Last page change: {{ lastPageChange }}
}

Usage Examples

Basic Pagination:

<ui-pagination
  [currentPage]="currentPage"
  [totalPages]="totalPages"
  (pageChange)="onPageChange($event)">
</ui-pagination>

With Item Information:

<ui-pagination
  [currentPage]="currentPage"
  [totalPages]="totalPages"
  [totalItems]="totalItems"
  [itemsPerPage]="itemsPerPage"
  [showInfo]="true"
  (pageChange)="onPageChange($event)">
</ui-pagination>

Compact with Labels:

<ui-pagination
  [currentPage]="currentPage"
  [totalPages]="totalPages"
  [compact]="true"
  [showLabels]="true"
  size="sm"
  alignment="left"
  previousLabel="Back"
  nextLabel="Forward"
  (pageChange)="onPageChange($event)">
</ui-pagination>

Customized Pagination:

<ui-pagination
  [currentPage]="currentPage"
  [totalPages]="totalPages"
  [maxVisible]="5"
  size="lg"
  alignment="center"
  ariaLabel="Search results pagination"
  [showInfo]="true"
  (pageChange)="handlePageChange($event)">
</ui-pagination>

Edge Cases

Single Page

Two Pages

Large Dataset (1000+ pages)

`, styles: [` h2 { color: hsl(279, 14%, 11%); font-size: 2rem; margin-bottom: 2rem; border-bottom: 2px solid hsl(258, 100%, 47%); padding-bottom: 0.5rem; } h3 { color: hsl(279, 14%, 25%); font-size: 1.5rem; margin-bottom: 1rem; } h4 { color: hsl(287, 12%, 35%); font-size: 1.125rem; margin-bottom: 0.75rem; } section { border: 1px solid hsl(289, 14%, 90%); border-radius: 8px; padding: 1.5rem; background: hsl(286, 20%, 99%); } pre { font-size: 0.875rem; line-height: 1.5; margin: 0.5rem 0; } code { font-family: 'JetBrains Mono', monospace; color: #d63384; } button:hover { background: #f0f0f0 !important; } button:active { background: #e0e0e0 !important; } `] }) export class PaginationDemoComponent { // Size variants currentPageSmall = signal(2); currentPageMedium = signal(3); currentPageLarge = signal(4); // Alignment variants currentPageLeft = signal(1); currentPageCenter = signal(5); currentPageRight = signal(8); // Info variants currentPageInfo = signal(3); currentPageItems = signal(2); currentPageNoInfo = signal(6); // Compact variants currentPageCompact = signal(4); currentPageCompactLabels = signal(2); // Different counts currentPageFew = signal(3); currentPageMany = signal(25); currentPageLimited = signal(15); // Labels and states currentPageLabels = signal(1); currentPageAria = signal(1); currentPageDisabled = signal(5); // Interactive currentPageInteractive = signal(1); totalPagesInteractive = signal(20); totalItemsInteractive = signal(387); // Edge cases currentPageTwo = signal(1); currentPageLargeDataset = signal(234); // Constants for edge cases totalPagesOne = signal(1); currentPageOne = signal(1); totalPagesTwo = signal(2); totalPagesLargeDataset = signal(1247); // Demo data totalPagesDemo = signal(12); totalPagesFew = signal(5); totalPagesMany = signal(50); totalItemsDemo = 234; itemsPerPageDemo = 20; totalPagesItems = signal(Math.ceil(this.totalItemsDemo / this.itemsPerPageDemo)); // Interactive state lastPageChange: string = ''; onPageChange(event: any, type: string): void { this.lastPageChange = `${type}: Page ${event.previousPage} → ${event.page}`; console.log(`Page changed in ${type}:`, event); // Update the appropriate signal based on type switch (type) { case 'small': this.currentPageSmall.set(event.page); break; case 'medium': this.currentPageMedium.set(event.page); break; case 'large': this.currentPageLarge.set(event.page); break; case 'left': this.currentPageLeft.set(event.page); break; case 'center': this.currentPageCenter.set(event.page); break; case 'right': this.currentPageRight.set(event.page); break; case 'info': this.currentPageInfo.set(event.page); break; case 'items': this.currentPageItems.set(event.page); break; case 'no-info': this.currentPageNoInfo.set(event.page); break; case 'compact': this.currentPageCompact.set(event.page); break; case 'compact-labels': this.currentPageCompactLabels.set(event.page); break; case 'few': this.currentPageFew.set(event.page); break; case 'many': this.currentPageMany.set(event.page); break; case 'limited': this.currentPageLimited.set(event.page); break; case 'labels': this.currentPageLabels.set(event.page); break; case 'aria': this.currentPageAria.set(event.page); break; case 'two': this.currentPageTwo.set(event.page); break; case 'large-dataset': this.currentPageLargeDataset.set(event.page); break; } } onInteractivePageChange(event: any): void { this.currentPageInteractive.set(event.page); this.lastPageChange = `Interactive: Page ${event.previousPage} → ${event.page}`; } // Interactive controls goToFirstPage(): void { this.currentPageInteractive.set(1); this.lastPageChange = 'Programmatically navigated to first page'; } goToLastPage(): void { this.currentPageInteractive.set(this.totalPagesInteractive()); this.lastPageChange = 'Programmatically navigated to last page'; } jumpToMiddle(): void { const middle = Math.ceil(this.totalPagesInteractive() / 2); this.currentPageInteractive.set(middle); this.lastPageChange = `Programmatically jumped to middle page (${middle})`; } resetInteractive(): void { this.currentPageInteractive.set(1); this.lastPageChange = 'Interactive pagination reset'; } }