basic

Pagination

Pagination with page navigation, next and previous links.

Preview

A preview of the Pagination component with interactive controls.

Preview Code
Previous123More pagesNext
Interactive

Installation

Add the Pagination component to your project.

Bash
ng g @ng-cn/core:c pagination

Usage

Import and use the Pagination component in your Angular application.

Template TypeScript
template.html
<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" isActive>2</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">3</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

Examples

Explore different variations and use cases for the Pagination component.

Basic

Preview Code
Interactive

API Reference

Props
Prop Type Default Description
isActive boolean false Whether the pagination link is active.
class string — Additional CSS classes to apply.