Component

Pagination

A page navigator that computes its own page numbers and ellipses. Derive the page count from a total, control how many sibling and boundary pages show, add first/last and labelled prev/next buttons, size it, and template every part.

From a total

Page 1 of 25

import { ChangeDetectionStrategy, Component, signal } from '@angular/core';

import { HbPaginationImports } from '@herbst/ui';

@Component({
  selector: 'hb-demo-pagination-basic',
  imports: [HbPaginationImports],
  template: `
    <div class="flex flex-col items-start gap-2">
      <hb-pagination [(hbPage)]="page" [hbTotal]="248" [hbPageSize]="10" />
      <p class="font-mono text-[12px] text-muted-foreground">Page {{ page() }} of 25</p>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoPaginationBasicComponent {
  protected readonly page = signal(1);
}

First/last, labels, siblings & sizes

Custom page & ellipsis

API reference

hb-pagination — pages

Property	Description	Type	Default
[(hbPage)]	The current page (1-based), two-way bound.	number	1
[hbPageCount]	The total number of pages, given directly. Takes precedence over hbTotal.	number	0
[hbTotal] / [hbPageSize]	Derive the page count as ceil(total / pageSize) when hbPageCount is not set.	number	0 / 10
[hbSiblings] / [hbBoundaries]	How many pages to show around the current page, and at each end, before collapsing to an ellipsis.	number	1 / 1

hb-pagination — controls

Property	Description	Type	Default
[hbSize] / [hbDisabled]	Button size, and a flag that blocks all navigation.	'xs'–'xl' / boolean	'md' / false
[hbShowPrevNext] / [hbShowFirstLast]	Toggle the previous/next arrows and the jump-to-first/last buttons.	boolean	true / false
[hbPreviousLabel] / [hbNextLabel]	Optional text shown alongside the prev/next arrows.	string	''
icon inputs	hbPreviousIcon, hbNextIcon, hbFirstIcon, hbLastIcon, hbEllipsisIcon override the default phosphor icons.	string	phosphorCaret…
[hbAriaLabel]	The accessible label for the navigation landmark.	string	'pagination'

Template slots

Property	Description	Type	Default
ng-template[hbPageTemplate]	Replace each page button. Context: $implicit = page, active, disabled.	template	—
ng-template[hbEllipsisTemplate]	Replace the ellipsis. Context: $implicit = side ("left" \| "right").	template	—
ng-template[hbPreviousTemplate] / [hbNextTemplate]	Replace the prev/next buttons. Context: $implicit = target page, disabled.	template	—