@theredhead — Frontend Library - v1.0.0
    Preparing search index...

    Class UIPagination

    A pagination control for navigating through pages of data.

    <ui-pagination
      [totalItems]="250"
      [(pageIndex)]="currentPage"
      [pageSize]="10"
      (pageChange)="onPage($event)"
    />
    Index

    Constructors

    constructor

    Properties

    ariaLabel buttonColor disabled hasMore hasNext hasPrevious pageChange pageIndex pages pageSize pageSizeOptions summary totalItems totalPages

    Methods

    goToFirst goToLast goToNext goToPage goToPrevious onPageSizeChange

    Constructors

    Properties

    ariaLabel: InputSignal<string> = ...

    Accessible label for the nav element.

    buttonColor: InputSignal<ButtonColor> = ...

    Color scheme for pagination buttons. Defaults to 'primary' (accent colour). Pass 'neutral' when embedding inside a surface that should not compete with the accent colour (e.g. a table footer).

    disabled: InputSignal<boolean> = ...

    Whether the pagination is disabled.

    hasMore: InputSignal<boolean | null> = ...

    Explicit hint for whether more pages exist beyond the current one. Only used when totalItems is null. When null (default), more pages are assumed to exist (next button stays enabled).

    hasNext: Signal<boolean> = ...

    Whether the next button is enabled. When totalItems is unknown, falls back to hasMore (defaults to true).

    hasPrevious: Signal<boolean> = ...

    Whether the previous button is enabled.

    pageChange: OutputEmitterRef<PageChangeEvent> = ...

    Emitted on page or size change.

    pageIndex: ModelSignal<number> = ...

    Zero-based current page index. Supports two-way binding.

    pages: Signal<number[]> = ...

    The page numbers to display. Empty when total is unknown — no page buttons are rendered.

    pageSize: InputSignal<number> = ...

    Number of items per page.

    pageSizeOptions: InputSignal<readonly number[]> = ...

    Available page size options for the selector. Empty array (the default) hides the page-size selector.

    summary: Signal<string> = ...

    "A–B of N" when total is known, "Page X" when unknown.

    totalItems: InputSignal<number | null> = ...

    Total number of items, or null when the total is unknown (e.g. infinite scroll / server-side pagination with no count).

    totalPages: Signal<number | null> = ...

    Total number of pages, or null when totalItems is unknown.

    Methods

    • Go to first page.

      Returns void

    • Go to last page. Only works when totalItems is known.

      Returns void

    • Go to next page.

      Returns void

    • Go to a specific page.

      Parameters

      • index: number

      Returns void

    • Go to previous page.

      Returns void

    • Handle page size change from the dropdown.

      Parameters

      • value: string | null

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Methods