Pagination

Pagination with page navigation, next and previous links to help users navigate through large sets of content.

About

The Pagination component provides a suite of tools to manage navigation between multiple pages of content. It supports simple link-based navigation as well as advanced numbered pagination with automatic state management.

Installation

Run the following command to install the pagination component:

Usage

pagination-usage.ts

Default

A standard pagination with numbered links, ellipsis, and text buttons.

Icon Only (Previous/Next)

Compact version using only icons for navigation and rounded links.

Advanced Numbered Pagination

Fully automated pagination that handles item count, page calculation, and active states.

Showing results 1 - 10 of 120Page 1
120 total items | 12 pages

Advanced - Query Params Sync

Synchronize the pagination state directly with the URL query parameters.

Query Sync Active

100 total items | 10 pages
Note: The URL will update with ?page=6 as you navigate.

API Reference

Helm API

Pagination consists of several directives to build the structure.

Directive / ComponentSelectorDescription
HlmPagination[hlmPagination] The root nav container for pagination.
HlmPaginationContent[hlmPaginationContent] The list container (ul) for items.
HlmPaginationItem[hlmPaginationItem]Wraps individual page links.
HlmNumberedPaginationhlm-numbered-pagination High-level component for automated numbered pagination.