If you have a website with lots of pages, you may wish to add some sort of pagination to each page:
Use component <ply-paginator></ply-paginator>. And put the required pages with the component <ply-p-page></ply-p-page> inside. Add [active]="true" in <ply-p-page> if you want to make that page active. Check example below.
<ply-paginator> <ply-p-page [active]="true">1</ply-p-page> <ply-p-page>2</ply-p-page> <ply-p-page>3</ply-p-page> <ply-p-page>4</ply-p-page> </ply-paginator>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add paginator
// Paths are relative to aliases.components (default: src/app/components)
import { PPageComponent } from './paginator/p-page/p-page.component';
import { PaginatorComponent } from './paginator/paginator.component';
@Component({
selector: 'app-paginator-example',
imports: [
PPageComponent,
PaginatorComponent
],
template: `...`
})
export class PaginatorExampleComponent {}Install
npx ply-ui-cli add paginator
Add an input <[arrows]="true"> to get arrows instead words for navigation. Check example below
<ply-paginator [arrows]="true"> <ply-p-page [active]="true">1</ply-p-page> <ply-p-page>2</ply-p-page> <ply-p-page>3</ply-p-page> <ply-p-page>4</ply-p-page> </ply-paginator>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add paginator
// Paths are relative to aliases.components (default: src/app/components)
import { PPageComponent } from './paginator/p-page/p-page.component';
import { PaginatorComponent } from './paginator/paginator.component';
@Component({
selector: 'app-paginator-example',
imports: [
PPageComponent,
PaginatorComponent
],
template: `...`
})
export class PaginatorExampleComponent {}Install
npx ply-ui-cli add paginator
To get specially designed from our team complex paginator use <[plyPaginator]="true"> into the component. Check example below.
Go to page
1 of 125
<ply-paginator [plyPaginator]="true" [itemsPerPage]="20" [pageSizeOptions]="[20, 40, 80]"></ply-paginator>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add paginator
// Paths are relative to aliases.components (default: src/app/components)
import { PPageComponent } from './paginator/p-page/p-page.component';
import { PaginatorComponent } from './paginator/paginator.component';
@Component({
selector: 'app-paginator-example',
imports: [
PPageComponent,
PaginatorComponent
],
template: `...`
})
export class PaginatorExampleComponent {}Install
npx ply-ui-cli add paginator
Run the following command to add this component to your project:
npx ply-ui-cli add paginator
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.
npx -y ply-ui-mcp
Ply provides standalone components. Import the exact elements you want to use into your component.
// Install: npx ply-ui-cli add paginator
// Paths are relative to aliases.components (default: src/app/components)
import { PPageComponent } from './paginator/p-page/p-page.component';
import { PaginatorComponent } from './paginator/paginator.component';
@Component({
selector: 'app-your-component',
imports: [
PPageComponent,
PaginatorComponent
],
template: `...`
})
export class YourComponent {} API for paginator — generated from JSDoc in the library source.
| API | Member | Type | Default | Description |
|---|---|---|---|---|
ply-p-page | active | boolean | false | Indicates if this page is currently the active/selected page. |
ply-paginator | plyPaginator | boolean | false | If true, applies a distinct "base" visual variant. |
ply-paginator | arrows | boolean | false | If true, shows explicit previous/next arrow buttons instead of standard pagination. |
ply-paginator | itemsPerPage | string | number | null | null | The currently selected number of items per page. |
ply-paginator | pageSizeOptions | number[] | [10, 25, 50, 100] | The available options for "items per page" dropdown. Defaults to [10, 25, 50, 100]. |
Content