Pagination

Page navigation for long lists and search results, with previous and next buttons and ellipses when there are many pages.

Bootstrap’s pagination docs describe the markup and CSS.

Example

Bind the current page with [(page)] and set pageCount. Give the <nav> an aria-label that says what it pages. The current page gets aria-current="page".

Page 1 of 5

<nav bsPagination aria-label="Search results pages" [(page)]="page" [pageCount]="5"></nav>
<p class="mb-0">Page {{ page() }} of 5</p>

Many pages

When there are more pages than maxPages (7 by default), the first and last page stay visible and ellipses replace the rest.

<nav bsPagination aria-label="Archive pages" [(page)]="page" [pageCount]="40"></nav>

Working with icons

Replace the previous and next text with previousText and nextText, and give them accessible names with previousLabel and nextLabel.

HTML

<nav
  bsPagination
  aria-label="Gallery pages"
  [pageCount]="3"
  previousText="«"
  previousLabel="Previous"
  nextText="»"
  nextLabel="Next"></nav>

Sizing and themes

Set size to sm or lg, and theme to color the active page.

HTML

<nav bsPagination aria-label="Small pagination" size="sm" [pageCount]="3"></nav>
<nav bsPagination aria-label="Large pagination" size="lg" theme="accent" [pageCount]="3"></nav>
<nav bsPagination aria-label="Success pagination" theme="success" [pageCount]="3"></nav>

API

BsPagination

Selector: nav[bsPagination] · Exported as: bsPagination

Inputs

Name	Type	Default	Description
`page`	`number`	`1`	Current page, starting at 1. Supports [(page)].
`pageCount`	`number`	`required`	Number of pages.
`maxPages`	`number`	`7`	Most page buttons to show, including the first and last. At least 5.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the pagination.
`theme`	`BsTheme \| null`	`null`	Theme color of the active page.
`previousText`	`string`	`'Previous'`	Visible text of the previous button.
`nextText`	`string`	`'Next'`	Visible text of the next button.
`previousLabel`	`string \| null`	`null`	Accessible label of the previous button.
`nextLabel`	`string \| null`	`null`	Accessible label of the next button.

Outputs

Name	Type	Description
`pageChange`	`number`	Emits the new page.

Methods

Name	Type	Description
`select(page)`	`void`	Goes to a page, clamped to the available pages.