Overview
tng-paginator provides first/prev/next/last, numbered page buttons with ellipsis, and optional page-size selector. Bind [count], [page], [pageSize] and handle (change) (or pageChange / pageSizeChange). Page is 1-based. Exposes computed totalPages, skip, rangeStart, rangeEnd, pages for templates.
Quick example
Basic
<tng-paginator
[count]="count()"
[page]="page()"
[pageSize]="pageSize()"
(change)="onChange($event)"
></tng-paginator>
import { TngPaginator, TngPaginatorChange } from '@tailng-ui/ui/navigation';
page = signal(1);
pageSize = signal(10);
onChange(e: TngPaginatorChange) {
this.page.set(e.page);
this.pageSize.set(e.pageSize);
} Showing 1–10 of 95
Rows
…
Page 1 of 10 (95 items)
Features
State
count, page (1-based), pageSize. pageSizeOptions, hidePageSize, maxPages (visible page buttons).
Events & slot styling
(change) with page, pageSize, skip. Slot-based styling: root, left, right, button, page, activePage, select, separator.