Pagination for Angular

import { AuiPagination } from '@absoluteui/angular/pagination';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Pagination page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { pagination: { ... } } }) (see Configuration).

Example

import { Component } from '@angular/core';
import { AuiPagination } from '@absoluteui/angular/pagination';

@Component({
  selector: 'app-orders-pager',
  imports: [AuiPagination],
  template: `<aui-pagination [total]="total" [pageSize]="pageSize" [pageSizes]="[25, 50, 100]" [page]="page" (changed)="onPage($event.page, $event.pageSize)"></aui-pagination>`,
})
export class OrdersPagerComponent {
  total = 240;
  page = 1;
  pageSize = 25;
  onPage(page: number, pageSize: number | null): void {
    this.page = page;
    if (pageSize !== null) this.pageSize = pageSize;
  }
}

<aui-pagination>

Class AuiPagination; template reference #ref="auiPagination".

Server rendering: Renders on the server; the browser re-creates it after hydration.

Inputs

Input	Type	Default	Description
pageCount	number		Number of pages. Provide either pageCount or total.
total	number		Total items; the page count is derived from pageSize. Enables the summary.
pageSizes	readonly number[]		Render a native ‘Rows per page’ select with these sizes.
label	string	'Pagination (localized)'	Accessible name of the <nav>.
icons	Partial<PaginationIcons>		Icon slot overrides.
siblingCount	number	'1'	Pages shown on each side of the current page (0 to 10).
boundaryCount	number	'1'	Pages always shown at the start and end (0 to 10).
showFirstLast	boolean	false	Render first/last page buttons.
showSummary	boolean	true	Show ‘Showing 11-20 of 57’ when total is known.
locale	string	'en-US'	Message and number-formatting locale.
direction	Direction	'ltr'	rtl mirrors the direction icons.

Two-way bindings

Model	Type	Change output	Description
[(page)]	number	(pageChange)	Current page, 1-based; clamped to 1..pageCount.
[(pageSize)]	number	(pageSizeChange)	Items per page. Required with total unless pageSizes is set (then defaults to its first entry).

Outputs

Output	Payload	Description
(changed)	PaginationChangeDetail	The user changed the page or the page size. Re-emits aui-change.

Methods

Call them through a viewChild query or a template reference.

Method	Description
setPage(page: number): void	Go to a page programmatically (clamped; no events, no announcement).

Test harness

AuiPaginationHarness from @absoluteui/angular/testing. <aui-pagination>.