# Pagination Pagination is best when users move through a known page model such as admin tables, search results, logs, and archives. This component supports compact prev and next navigation, numbered page windows with ellipsis compression, optional first and last jumps, and a page size selector powered by the shared dropdown. ## Import ```ts import { PaginationComponent, type PaginationConfig } from 'ui'; ``` ## Basic page navigation ```ts import { Component, computed, signal } from '@angular/core'; import { PaginationComponent, PaginationConfig } from 'ui'; @Component({ selector: 'app-pagination-basic-example', standalone: true, imports: [PaginationComponent], template: `

State

Current page {{ currentPage() }}
Total pages {{ config.totalPages }}
Total items {{ config.totalItems }}
`, }) export class PaginationBasicExampleComponent { protected readonly currentPage = signal(3); protected readonly config: PaginationConfig = { currentPage: 3, totalPages: 12, totalItems: 234, pageSize: 20, showPageNumbers: true, maxVisiblePages: 7, showFirstLast: false, showInfo: true, showPageSizeSelector: false, }; protected readonly paginationConfig = computed(() => ({ ...this.config, currentPage: this.currentPage(), })); } ``` ## Page number window and ellipsis ```ts import { Component, computed, signal } from '@angular/core'; import { PaginationComponent, PaginationConfig } from 'ui'; @Component({ selector: 'app-pagination-windowing-example', standalone: true, imports: [PaginationComponent], template: `
Use a shorter visible window and ellipsis compression when the dataset is large enough that showing every page button would become noise.
A wider window is useful when pagination is one of the primary exploration controls in a data-heavy screen.
`, }) export class PaginationWindowingExampleComponent { protected readonly currentPage = signal(18); private readonly baseConfig: PaginationConfig = { currentPage: 18, totalPages: 48, totalItems: 960, pageSize: 20, showPageNumbers: true, maxVisiblePages: 5, showFirstLast: false, showInfo: true, showPageSizeSelector: false, }; protected readonly compactWindowConfig = computed(() => ({ ...this.baseConfig, currentPage: this.currentPage(), maxVisiblePages: 5, })); protected readonly wideWindowConfig = computed(() => ({ ...this.baseConfig, currentPage: this.currentPage(), maxVisiblePages: 6, })); } ``` ## First and last jumps ```ts import { Component, computed, signal } from '@angular/core'; import { PaginationComponent, PaginationConfig } from 'ui'; @Component({ selector: 'app-pagination-first-last-example', standalone: true, imports: [PaginationComponent], template: `
Why use this Faster jumps make sense when users routinely move across distant pages, such as audit logs or archived records.
Current page {{ currentPage() }}
`, }) export class PaginationFirstLastExampleComponent { protected readonly currentPage = signal(27); private readonly config: PaginationConfig = { currentPage: 27, totalPages: 80, totalItems: 1600, pageSize: 20, showPageNumbers: true, maxVisiblePages: 7, showFirstLast: true, showInfo: true, showPageSizeSelector: false, }; protected readonly withJumpConfig = computed(() => ({ ...this.config, currentPage: this.currentPage(), })); } ``` ## Page size selector ```ts import { Component, computed, signal } from '@angular/core'; import { PaginationComponent, PaginationConfig } from 'ui'; @Component({ selector: 'app-pagination-page-size-example', standalone: true, imports: [PaginationComponent], template: `
Results explorer
Let users change page size when they need to trade scan speed against row density.
Page {{ currentPage() }}
Per page {{ pageSize() }}
Total pages {{ totalPages() }}
`, }) export class PaginationPageSizeExampleComponent { protected readonly currentPage = signal(1); protected readonly pageSize = signal(20); private readonly totalItems = 486; protected readonly totalPages = computed(() => Math.ceil(this.totalItems / this.pageSize())); protected readonly paginationConfig = computed(() => ({ currentPage: this.currentPage(), totalPages: this.totalPages(), totalItems: this.totalItems, pageSize: this.pageSize(), showPageNumbers: true, maxVisiblePages: 7, showFirstLast: true, showInfo: true, showPageSizeSelector: true, pageSizeOptions: [10, 20, 50, 100], })); protected onPageSizeChange(size: number): void { this.pageSize.set(size); this.currentPage.set(1); } } ``` ## Sizes and density ```ts import { Component, computed, signal } from '@angular/core'; import { PaginationComponent, PaginationConfig } from 'ui'; @Component({ selector: 'app-pagination-density-example', standalone: true, imports: [PaginationComponent], template: `
Small works in dense tables, medium is the default for most views, and large is better when pagination needs more touch room.
`, }) export class PaginationDensityExampleComponent { protected readonly currentPage = signal(4); protected readonly config = computed(() => ({ currentPage: this.currentPage(), totalPages: 14, totalItems: 280, pageSize: 20, showPageNumbers: true, maxVisiblePages: 5, showFirstLast: false, showInfo: false, showPageSizeSelector: false, })); } ``` ## Results layout pattern ```ts import { Component, computed, signal } from '@angular/core'; import { PaginationComponent, PaginationConfig } from 'ui'; type ResultRow = { title: string; owner: string; status: string; }; const allRows: ResultRow[] = Array.from({ length: 57 }, (_, index) => ({ title: `Quarterly report ${index + 1}`, owner: ['Ava Lopez', 'Nina Woods', 'Theo Murphy'][index % 3], status: ['Ready', 'Needs review', 'Draft'][index % 3], })); @Component({ selector: 'app-pagination-results-layout-example', standalone: true, imports: [PaginationComponent], template: `
Reports
Pair pagination with a real list so users can see scan rhythm, item count, and page changes in context.
{{ visibleRows().length }} rows on this page
@for (row of visibleRows(); track row.title) {
{{ row.title }} {{ row.owner }}
{{ row.status }}
}
`, }) export class PaginationResultsLayoutExampleComponent { protected readonly currentPage = signal(2); protected readonly pageSize = signal(10); private readonly rows = allRows; protected readonly totalPages = computed(() => Math.ceil(this.rows.length / this.pageSize())); protected readonly visibleRows = computed(() => { const start = (this.currentPage() - 1) * this.pageSize(); return this.rows.slice(start, start + this.pageSize()); }); protected readonly paginationConfig = computed(() => ({ currentPage: this.currentPage(), totalPages: this.totalPages(), totalItems: this.rows.length, pageSize: this.pageSize(), showPageNumbers: true, maxVisiblePages: 5, showFirstLast: true, showInfo: true, showPageSizeSelector: true, pageSizeOptions: [10, 20, 50], })); protected onPageSizeChange(size: number): void { this.pageSize.set(size); this.currentPage.set(1); } } ``` ## Accessibility ### Navigation and current page Pagination is a navigation pattern made of regular interactive controls rather than a single composite widget. The current numbered page button exposes `aria-current="page"` so assistive technology can identify the active slice. | Element / state | Accessibility behavior | | --- | --- | | current page button | `aria-current="page"` | | first / previous / next / last | explicit i18n-backed `aria-label` values | | disabled jump buttons | native button disabled state | ### Keyboard Pagination follows standard button and dropdown keyboard behavior. No extra roving or custom key model is added on top. | Element | Keyboard behavior | | --- | --- | | numbered buttons | standard button keyboard support | | previous / next / first / last | standard button keyboard support | | page size selector | follows `DropdownComponent` keyboard behavior | ### Range info and page size selector The optional range text gives screen-reader and sighted users the same dataset context, for example `Showing 41-50 of 200`. When the page size selector is enabled, its accessible behavior comes from the shared dropdown, so it should still be treated as a real field rather than decorative chrome.