Pagination

The Pagination primitives provide a set of directives to create a pagination control. The pagination control is used to navigate through a set of data that is split into multiple pages.

Import

Import the Pagination primitives from ng-primitives/pagination.

import {
  NgpPagination,
  NgpPaginationButton,
  NgpPaginationFirst,
  NgpPaginationNext,
  NgpPaginationPrevious,
  NgpPaginationLast,
} from 'ng-primitives/pagination';

Usage

Assemble the pagination directives in your template.

<nav
  [(ngpPaginationPage)]="page"
  ngpPagination
  ngpPaginationPageCount="5"
  aria-label="Pagination Navigation"
>
  <ul>
    <li>
      <a ngpPaginationFirst aria-label="First Page">
        <ng-icon name="heroChevronDoubleLeft" />
      </a>
    </li>

    <li>
      <a ngpPaginationPrevious aria-label="Previous Page">
        <ng-icon name="heroChevronLeft" />
      </a>
    </li>

    <li>
      <a ngpPaginationButton ngpPaginationButtonPage="1" aria-label="Page 1">1</a>
    </li>
    <li>
      <a ngpPaginationButton ngpPaginationButtonPage="2" aria-label="Page 2">2</a>
    </li>
    <li>
      <a ngpPaginationButton ngpPaginationButtonPage="3" aria-label="Page 3">3</a>
    </li>
    <li>
      <a ngpPaginationButton ngpPaginationButtonPage="4" aria-label="Page 4">4</a>
    </li>
    <li>
      <a ngpPaginationButton ngpPaginationButtonPage="5" aria-label="Page 5">5</a>
    </li>

    <li>
      <a ngpPaginationNext aria-label="Next Page">
        <ng-icon name="heroChevronRight" />
      </a>
    </li>

    <li>
      <a ngpPaginationLast aria-label="Last Page">
        <ng-icon name="heroChevronDoubleRight" />
      </a>
    </li>
  </ul>
</nav>

Reusable Component

Create a reusable component that uses the pagination directives.

Schematics

Generate a reusable pagination component using the Angular CLI.

ng g ng-primitives:primitive pagination

API Reference

The following directives are available to import from the ng-primitives/pagination package:

NgpPagination

The NgpPagination directive is used to create a pagination control.

• Selector: [ngpPagination]
• Exported As: ngpPagination

Data Attributes

The following data attributes are applied to the ngpPagination directive:

NgpPaginationButton

The NgpPaginationButton directive is used to create a pagination button.

• Selector: [ngpPaginationButton]
• Exported As: ngpPaginationButton
• Host Directives: NgpButton

Data Attributes

The following data attributes are applied to the ngpPaginationButton directive:

NgpPaginationFirst

The NgpPaginationFirst directive is used to create a pagination button that navigates to the first page.

• Selector: [ngpPaginationFirst]
• Exported As: ngpPaginationFirst
• Host Directives: NgpButton

Data Attributes

The following data attributes are applied to the ngpPaginationFirst directive:

NgpPaginationPrevious

The NgpPaginationPrevious directive is used to create a pagination button that navigates to the previous page.

• Selector: [ngpPaginationPrevious]
• Exported As: ngpPaginationPrevious
• Host Directives: NgpButton

Data Attributes

The following data attributes are applied to the ngpPaginationPrevious directive:

NgpPaginationNext

The NgpPaginationNext directive is used to create a pagination button that navigates to the next page.

• Selector: [ngpPaginationNext]
• Exported As: ngpPaginationNext
• Host Directives: NgpButton

Data Attributes

The following data attributes are applied to the ngpPaginationNext directive:

NgpPaginationLast

The NgpPaginationLast directive is used to create a pagination button that navigates to the last page.

• Selector: [ngpPaginationLast]
• Exported As: ngpPaginationLast
• Host Directives: NgpButton

Data Attributes

The following data attributes are applied to the ngpPaginationLast directive: