Pagination
Page navigation with automatic ellipsis for large page counts.
| Input | Type | Default | Description |
|---|---|---|---|
totalPages | number | required | Total number of pages |
currentPage | number | 1 | Current active page |
maxVisible | number | 5 | Max visible page buttons |
| Output | Type | Description |
|---|---|---|
pageChange | number | Emitted with the new page number |
Import & Usage
typescript
import { Component, signal } from '@angular/core';
import { NgOatPagination } from '@letsprogram/ng-oat/pagination';
@Component({
selector: 'app-example',
imports: [NgOatPagination],
template: `
<ng-oat-pagination
[totalPages]="20"
[currentPage]="page()"
(pageChange)="page.set($event)" />
`,
})
export class ExampleComponent {
page = signal(1);
}Interactive Pagination
Current page: 1
html
<ng-oat-pagination
[totalPages]="10"
[currentPage]="page()"
(pageChange)="page.set($event)" />Many Pages (with Ellipsis)
Page 25 of 50
html
<ng-oat-pagination
[totalPages]="50"
[currentPage]="currentPage()"
(pageChange)="currentPage.set($event)" />Few Pages
html
<ng-oat-pagination [totalPages]="3" [currentPage]="page()" (pageChange)="page.set($event)" />