Bootstrap 5 & Angular 15 pagination

Update Pagination Component Class: Implement the pagination logic in the pagination.component.ts file.

// pagination.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-pagination',
  templateUrl: './pagination.component.html',
  styleUrls: ['./pagination.component.scss'],
})
export class PaginationComponent {
  @Input() totalItems: number = 0;
  @Input() itemsPerPage: number = 10;
  @Input() currentPage: number = 1;

  @Output() pageChanged: EventEmitter = new EventEmitter();

  get pages(): number[] {
    const pageCount = Math.ceil(this.totalItems / this.itemsPerPage);
    return Array.from({ length: pageCount }, (_, i) => i + 1);
  }

  changePage(page: number) {
    if (page !== this.currentPage) {
      this.currentPage = page;
      this.pageChanged.emit(this.currentPage);
    }
  }
}

Use Pagination Component in Your Component: In the component where you want to use pagination, include the app-pagination selector.

// your-component.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  template: `
    

    
  `,
})
export class YourComponent {
  totalItems = 100; // replace with the actual total number of items
  itemsPerPage = 10;
  currentPage = 1;

  onPageChanged(page: number) {
    // Handle page change logic, e.g., fetching data for the new page
    console.log('Page changed to:', page);
  }
}

1. First, make sure you have Bootstrap 5 and Angular 15 set up in your project.

2. Create a new Angular component for pagination:
Run the following command in your terminal:

ng generate component pagination

Open the pagination.component.html file and add the pagination HTML using Bootstrap classes:

Open the pagination.component.ts file and add the pagination logic:

import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'app-pagination',
  templateUrl: './pagination.component.html',
  styleUrls: ['./pagination.component.css']
})
export class PaginationComponent {
  @Input() currentPage: number;
  @Input() totalPages: number;
  @Output() pageChange = new EventEmitter();

  get pages(): number[] {
    const pagesArray = [];
    for (let i = 1; i <= this.totalPages; i++) {
      pagesArray.push(i);
    }
    return pagesArray;
  }

  goToPage(page: number) {
    if (page >= 1 && page <= this.totalPages) {
      this.pageChange.emit(page);
    }
  }

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

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

Use the app-pagination component in your parent component's template (e.g., app.component.html):

Implement the onPageChange method in your parent component's TypeScript file (e.g., app.component.ts) to handle the page change event:

onPageChange(page: number) {
  // Implement logic to fetch data for the new page
  // Update currentPage with the new page number
}

 

Remember to adjust the styles and behavior according to your project's requirements. This example provides a basic pagination component using Bootstrap 5 and Angular 15. You can customize and enhance it further based on your needs.