How to Create Pagination in Angular: Simple Step-by-Step Guide

To create pagination in Angular, use component variables to track the current page and page size, then slice your data array accordingly in the template with *ngFor. Add buttons or controls to change pages by updating the current page variable and re-rendering the list.

Syntax

Pagination in Angular typically involves these parts:

• Component variables: currentPage to track the active page and pageSize for items per page.
• Data slicing: Use array slice() method to show only items for the current page.
• Template controls: Buttons or links to change currentPage.

typescript/html

currentPage = 1;
pageSize = 5;
data = [...];

get pagedData() {
  const start = (this.currentPage - 1) * this.pageSize;
  return this.data.slice(start, start + this.pageSize);
}

// In template:
// <div *ngFor="let item of pagedData">{{ item }}</div>
// <button (click)="currentPage = currentPage - 1" [disabled]="currentPage === 1">Prev</button>
// <button (click)="currentPage = currentPage + 1" [disabled]="currentPage === totalPages">Next</button>

Example

This example shows a simple Angular component that paginates a list of numbers with next and previous buttons.

typescript

import { Component } from '@angular/core';

@Component({
  selector: 'app-pagination',
  template: `
    <div *ngFor="let item of pagedData">Item {{ item }}</div>
    <button (click)="prevPage()" [disabled]="currentPage === 1">Previous</button>
    <button (click)="nextPage()" [disabled]="currentPage === totalPages">Next</button>
    <p>Page {{ currentPage }} of {{ totalPages }}</p>
  `
})
export class PaginationComponent {
  data = Array.from({ length: 20 }, (_, i) => i + 1);
  currentPage = 1;
  pageSize = 5;

  get totalPages() {
    return Math.ceil(this.data.length / this.pageSize);
  }

  get pagedData() {
    const start = (this.currentPage - 1) * this.pageSize;
    return this.data.slice(start, start + this.pageSize);
  }

  nextPage() {
    if (this.currentPage < this.totalPages) {
      this.currentPage++;
    }
  }

  prevPage() {
    if (this.currentPage > 1) {
      this.currentPage--;
    }
  }
}

Output

Item 1
Item 2
Item 3
Item 4
Item 5
[Previous disabled] [Next enabled]
Page 1 of 4

Common Pitfalls

Common mistakes when creating pagination in Angular include:

• Not disabling navigation buttons at first or last page, causing errors.
• Not recalculating total pages when data changes.
• Using slice() incorrectly, showing wrong items.
• Not updating the view when currentPage changes.

typescript

/* Wrong: Not disabling buttons and no boundary checks */
nextPage() {
  this.currentPage++;
}

prevPage() {
  this.currentPage--;
}

/* Right: Add checks to prevent invalid pages */
nextPage() {
  if (this.currentPage < this.totalPages) {
    this.currentPage++;
  }
}

prevPage() {
  if (this.currentPage > 1) {
    this.currentPage--;
  }
}

Quick Reference

• currentPage: Tracks which page is shown.
• pageSize: Number of items per page.
• totalPages: Calculate with Math.ceil(data.length / pageSize).
• pagedData: Slice data array for current page.
• Navigation buttons: Update currentPage with boundary checks.

Key Takeaways

Use component variables to track current page and page size for pagination.

Slice your data array to show only items for the active page in the template.

Add navigation buttons with checks to prevent going beyond first or last page.

Recalculate total pages if your data changes dynamically.

Keep your pagination logic simple and update the view reactively.