Getting StartedOwnable model, workflow, and first local install 2
LayoutInstallable layout wrappers with local source ownership 6
OverlayInstallable overlay wrappers with local source ownership 3
FeedbackInstallable feedback wrappers with local source ownership 5
FormInstallable form components 11
UtilityInstallable utility wrappers with local source ownership 6
NavigationInstallable navigation components 6
ToolingCLI and registry contracts 2
ReleasePublishing and workflow structure for the ownable surface 1

Pagination

The ownable Pagination install is meant for teams that want local control over range copy, compact mobile controls, page-size menus, and server-pagination affordances.

Why own Pagination locally

  • Adapt range labels and disabled-state copy to your data product.
  • Keep page-size options and server-mode behavior near the API integration.
  • Swap icons, density, and responsive controls without waiting on a package release.

Ownable Install

Install Pagination from the TailNG registry with the shadcn-like flow. This copies source files into your app so your team can own and evolve the implementation locally.

Install from registry

Run from your Angular workspace root.

pnpm

bash
pnpm dlx tailng add pagination

Generated files

The command scaffolds local files under src/app/tailng-ui/pagination.

  • src/app/tailng-ui/pagination/tng-pagination-primitive.ts
  • src/app/tailng-ui/pagination/tng-paginator.ts
  • src/app/tailng-ui/pagination/tng-paginator.html
  • src/app/tailng-ui/pagination/tng-paginator.css
  • src/app/tailng-ui/pagination/index.ts

Import in your feature module/component

Imports

ts
import { TngPaginator, TngPaginationPrimitive } from './tailng-ui/pagination';

Usage

Template usage

html
<tng-paginator
  ariaLabel="Invoice result pages"
  [totalItems]="128"
  [pageSizeOptions]="[10, 25, 50]"
  (pageChange)="loadPage($event)"
/>