Pagination is a common requirement in web applications to manage and display a large set of data in smaller, more manageable chunks.

Angular, a popular front-end framework, provides robust tools to implement pagination seamlessly. In this blog post, we’ll explore a step-by-step guide on how to implement pagination in Angular components.

Prerequisites

Before diving into the implementation, make sure you have a basic understanding of Angular and have an Angular project set up.

If you haven’t done so, you can create a new Angular project using the Angular CLI:

ng new your-pagination-app
cd your-pagination-app

Step 1: Install Dependencies

Angular Material provides a set of pre-built UI components, including pagination.

Install it by running the following command:

ng add @angular/material

Follow the on-screen instructions to set up Angular Material in your project.

Step 2: Import Pagination Module

In your Angular module (usually app[EXCLUDED_PERIOD]module[EXCLUDED_PERIOD]ts), import the MatPaginatorModule:

import { MatPaginatorModule } from '@angular/material/paginator';

@NgModule({
  // ...
  imports: [MatPaginatorModule],
  // ...
})
export class AppModule {}

Step 3: Set Up Pagination in Component

Assuming you have a service fetching paginated data, let’s integrate pagination into a component.

Import the MatPaginator and MatPaginatorIntl classes:

import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';

Extend the MatPaginatorIntl class to customize pagination labels:

export class CustomPaginator extends MatPaginatorIntl {
  itemsPerPageLabel = 'Items per page:';
  nextPageLabel = 'Next page';
  previousPageLabel = 'Previous page';
}

In your component, inject the paginator and set up the pagination properties:

import { Component, ViewChild, OnInit } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { YourDataService } from 'path-to-your-data-service';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css'],
  providers: [
    { provide: MatPaginatorIntl, useClass: CustomPaginator }
  ]
})
export class YourComponent implements OnInit {
  @ViewChild(MatPaginator) paginator: MatPaginator;

  constructor(private dataService: YourDataService) {}

  ngOnInit() {
    this.paginator.pageSize = 10; // Set the number of items per page
    this.loadData();
  }

  loadData() {
    // Fetch paginated data from your service
    this.dataService.getPaginatedData().subscribe(data => {
      // Assign data to your component property
      // For example, this.dataSource = new MatTableDataSource(data);
      // Don't forget to update the total items count
      this.paginator.length = data.totalItems;
    });
  }
}

Step 4: Integrate Pagination in HTML

In your component’s HTML file, use the mat-paginator directive to display the pagination UI:

<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

Adjust the [pageSizeOptions] array based on your application’s needs.

Conclusion

Implementing pagination in Angular components is straightforward with the help of Angular Material.

By following these steps, you can enhance your web application’s user experience by efficiently managing and presenting large sets of data. Remember to customize the pagination labels and styles to align with your application’s design principles.

Feel free to explore more customization options provided by Angular Material for pagination and adapt them to your specific use case.

Happy coding!

Similar Posts