Pagination

Name: ng-oat
Author: SashiKumar Yadav

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';

@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)" />