Angular Material Pagination: How To Set Page Index And Customize Your Pagination

Pagination is a required feature when handling huge data entries on the server using a web application. Angular Material provides a helpful, easy-to-use, and adjustable pagination component in the MatPaginator. 

In this short guide, we are going to tell you how you can programmatically set the page index and customize the pagination based on your application requirements. 

Whether you’re building a simple mobile app or a complex, high-traffic enterprise solution, this guide will give you the knowledge on how to make your app’s user experience downright superb with an elegant pagination solution.

Why use Angular Material Pagination?

One of the great things with Angular Material’s paginator is that it offers a lot of options and can be used to simplify multiple things, making it a great option to paginate your content in your application. Here’s why you should use one:

• Breaking data into manageable pages: Pagination helps in chunking large amounts of data into a form that users can understand and allowing them to use system resources more effectively.
  
• Management of page size, total count, and navigation: The paginator lets you define how many items are shown on a page and the ways a user can navigate through pages.
  
• Great user experience with Low effort: The paginator requires very little setup, but it provides a top-notch experience for your app.
  

Prerequisites

Before you begin, you will need to have Angular Material set up in your project. If not already installed, you can add it using:

ng add @angular/material

To use the paginator component, you must then import MatPaginatorModule into the module of your application:

import { MatPaginatorModule } from '@angular/material/paginator'; @NgModule({   imports: [MatPaginatorModule], }) export class AppModule {}

Example: Setting Page Index and Customizing Pagination

In this part, we are going to create a small example to show:

• Displaying paginated data
  
• Programmatically setting the page index
  
• Labels and styling Customization
  

Step 1: Add MatPaginator to Your Component Template

First, in your template, include the mat-paginator component. There is an easy setup that enables users to paginate a list of things:

<!-- app.component.html --> 
<div> 
  <table> 
    <tr *ngFor="let item of pagedItems"> 
      <td>{{ item }}</td> 
    </tr> 
  </table> 
 
  <mat-paginator  
    [length]="items.length" 
    [pageSize]="5" 
    [pageSizeOptions]="[5, 10, 20]" 
    (page)="onPageChange($event)"> 
  </mat-paginator> 
</div> 

Explanation:

• length: The dataset’s total number of segments.
  
• pageSize: The number of items per page to be shown by default.
  
• pageSizeOptions: Dropdown to allow user to set the page size.
  
• (page): Binds to an event that emits the page change information.

Step 2: Handle Pagination Logic in Your Component

Now, time to add the logic that will be handling the pagination in the component. We’ll systematically set the page index as well as handle the paginated data.

// app.component.ts 
import { Component, ViewChild, AfterViewInit } from '@angular/core'; 
import { MatPaginator, PageEvent } from '@angular/material/paginator'; 
 
@Component({ 
  selector: 'app-root', 
  templateUrl: './app.component.html' 
}) 
export class AppComponent implements AfterViewInit { 
  items = Array.from({ length: 50 }, (_, i) => `Item ${i + 1}`); 
  pagedItems: string[] = []; 
 
  @ViewChild(MatPaginator) paginator!: MatPaginator; 
 
  ngAfterViewInit() { 
    this.setPage(0); // Initialize first page 
  } 
 
  onPageChange(event: PageEvent) { 
    this.setPage(event.pageIndex); 
  } 
 
  setPage(pageIndex: number) { 
    const start = pageIndex * this.paginator.pageSize; 
    const end = start + this.paginator.pageSize; 
    this.pagedItems = this.items.slice(start, end); 
  } 
 
  // Programmatically set page index 
  goToPage(pageIndex: number) { 
    this.paginator.pageIndex = pageIndex; 
    this.paginator._changePageSize(this.paginator.pageSize); // refresh 
  } 
}

Explanation:

• ngAfterViewInit: It’s a life cycle hook which triggers the first page when the component loads.
  
• onPageChange: When the user navigates to a different page, this event gets started.
  
• setPage: This takes care of providing the start and end indexes for the current page and sets the paginated items.
  
• goToPage: Use this method to set the page index manually.
  

Step 3: Customize Labels (Optional)

If you would like to alter this paginator labels this can be done with the Angular Material MatPaginatorIntl class. The following is how a custom paginator can be created with refreshed labels.

import { Injectable } from '@angular/core'; 
import { MatPaginatorIntl } from '@angular/material/paginator'; 
 
@Injectable() 
export class CustomPaginatorIntl extends MatPaginatorIntl { 
  override itemsPerPageLabel = 'Items per page:'; 
  override nextPageLabel = 'Next →'; 
  override previousPageLabel = '← Previous'; 
  override firstPageLabel = 'First Page'; 
  override lastPageLabel = 'Last Page'; 
 
  override getRangeLabel = (page: number, pageSize: number, length: number) => { 
    if (length === 0 || pageSize === 0) return `0 of ${length}`; 
    const start = page * pageSize + 1; 
    const end = Math.min((page + 1) * pageSize, length); 
    return `${start} - ${end} of ${length}`; 
  }; 
}

Then, add the custom paginator to your AppModule:

import { MatPaginatorIntl } from '@angular/material/paginator'; 
import { CustomPaginatorIntl } from './custom-paginator-intl'; 
 
@NgModule({ 
  providers: [{ provide: MatPaginatorIntl, useClass: CustomPaginatorIntl }] 
}) 
export class AppModule {}

Explanation:

• CustomPaginatorIntl: This class extends MatPaginatorIntl and overrides the default labels and range information.
  
• The getRangeLabel method returns a custom range label, indicating which items are displayed at the current page.

Conclusion

The MatPaginator offers an easy way to manage large datasets. It manages to do that by splitting them into smaller, more manageable chunks. 

The paginator in Angular Material can let you adjust labels, adjust page size settings, or even make your own page index. It helps you create an efficient and user-friendly pagination interactive experience. 

Begin using it in your project today for a cleaner and better app.