Pagination

Pagination with page navigation, next and previous links.

PreviousNext
Loading...

Installation

1

Run the CLI

Use the CLI to add the component to your project.

Loading...
1

Add the component files

Create the component directory structure and add the following files to your project.

Loading...

Examples

default

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
 
import { ZardPaginationModule } from '../pagination.module';
 
@Component({
  selector: 'z-demo-pagination-default',
  standalone: true,
  imports: [ZardPaginationModule, FormsModule],
  template: ` <z-pagination [zPageIndex]="currentPage" [zTotal]="5" [(ngModel)]="currentPage" /> `,
})
export class ZardDemoPaginationDefaultComponent {
  protected currentPage = 2;
}
 

custom

Loading...

API

[z-pagination] Component

Pagination component with previous, next, and numbered page navigation. Supports two-way binding with [(ngModel)] and form integration via ControlValueAccessor.

Properties

Property Description Type Default
[class] Custom CSS classes string ''
[zSize] Button size 'sm' | 'md' | 'lg' | 'icon' 'icon'
[zPageIndex] Current page index (1-based) number 1
[zTotal] Total number of pages number 1
[zDisabled] Disables pagination interaction boolean false

Events

Event Description Payload
(zPageIndexChange) Emitted when the current page changes number

Forms

This component implements ControlValueAccessor, so it can be used with [(ngModel)] and Reactive Forms.


[z-pagination-content] Component

Container for pagination content (buttons and ellipsis).

Properties

Property Description Type Default
[class] Custom CSS classes string ''

[z-pagination-item] Component

Wraps a pagination button or ellipsis.

Properties

Property Description Type Default
[class] Custom CSS classes string ''

[z-pagination-button] Component

Pagination button with support for active and disabled states.

Properties

Property Description Type Default
[zDisabled] Whether the button is disabled boolean false
[zActive] Whether the button is currently active boolean false
[zSize] Button size 'sm' | 'md' | 'lg' | 'icon' 'icon'
[class] Custom CSS classes string ''

Events

Event Description
(zClick) Emitted when clicked (if not disabled or active)

[z-pagination-previous] Component

Button to go to the previous page.

Properties

Property Description Type Default
[class] Custom CSS classes string ''

[z-pagination-next] Component

Button to go to the next page.

Properties

Property Description Type Default
[class] Custom CSS classes string ''

[z-pagination-ellipsis] Component

Visual ellipsis ("…") for omitted pages.

Properties

Property Description Type Default
[class] Custom CSS classes string ''