Bootstrap 5 & Angular 15 pagination

Question

How to create component based pagination (Create seprate componet for pagination) using Bootstrap 5 & Angular 15

Prasad Raveendran · Answer

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: &laquo;&laquo; &laquo; {{ page }} &raquo; &raquo;&raquo; 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 = 1 && page 1) { this.goToPage(this.currentPage - 1); } } nextPage() { if (this.currentPage 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.

Tuhin Paul · Answer

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); } }

Bootstrap 5 & Angular 15 pagination

Answers (2)