GET STARTED

Import

Import the canonical standalone component from its granular entry point. The legacy PaginatorComponent export is retained only as a compatibility alias.

import { NeuralPaginator } from '@neural-ng/core/paginator';

@Component({ imports: [NeuralPaginator] })

Basic pagination

Bind both models when page navigation also controls a visible collection. The event range is directly compatible with slice(startIndex, endIndex).

Stable page window

Large collections retain their useful edges and compress the middle range with non-interactive ellipsis markers. pageLinkCount is normalized to at least five.

Report and local labels

The global locale supplies every label by default. A component may override the report and any accessible label without mutating application-wide messages.

Visibility and states

First/last controls and the report are independently optional. Disabled state reaches buttons and the page-size selector; an empty collection produces no invalid page buttons.

Visual variants

Rounded controls provide a circular navigation language while the outlined variant removes visible button borders and resting backgrounds. It adds a primary-tinted surface only on hover and identifies the active page with the primary foreground. Both variants preserve sizing and focus feedback, and they can be combined.

Unstyled and typed classes

Headless mode removes all NeuralNg visual classes while native structure, state normalization, localization, events and ARIA remain intact.

Landmark and structure

The root is a nav labelled by the active locale. Page controls live in a native unordered list; ellipses are presentation-only and never enter the tab order.

Current page and report

The selected button exposes aria-current="page". The range report uses aria-live="polite" and aria-atomic="true" so navigation updates are announced as one message.

Keyboard behavior

Tab follows normal document order. Enter and Space activate the focused native button. The composed NeuralSelect adds its standard listbox navigation, typeahead and Escape behavior. Boundary controls are genuinely disabled.

Localized labels

First, previous, next, last, page and page-size labels resolve from NeuralLocaleService. The labels input merges a partial local override over those messages.

Inputs and models

Events

Typed class slots

NeuralPageChange

The payload contains pageIndex, pageSize, pageCount, totalItems, startIndex and endIndex. Start is inclusive and end is exclusive.