Using Multi-Tab Pagination in Angular: A Seamless Guide"

Setting Up Pagination in Angular

Angular Material provides a MatTableDataSource and MatPaginator that make pagination implementation straightforward. Let's walk through the process of setting up pagination across multiple tabs.

Step 1: Install Angular Material

ng add @angular/material

Step 2: Create Multi-Tab Layout

<mat-tab-group>
 <mat-tab label="Tab 1">
  <table mat-table [dataSource]="dataSource1" class="mat-elevation-z8">
   <!-- Define your table columns here -->
  </table>
  <mat-paginator [length]="totalLength1" [pageSize]="pageSize1" (page)="onPaginateChange1($event)">
  </mat-paginator>
 </mat-tab>

 <mat-tab label="Tab 2">
  <table mat-table [dataSource]="dataSource2" class="mat-elevation-z8">
   <!-- Define your table columns here -->
  </table>
  <mat-paginator [length]="totalLength2" [pageSize]="pageSize2" (page)="onPaginateChange2($event)">
  </mat-paginator>
 </mat-tab>
</mat-tab-group>

Step 3: Add Pagination Logic for Each Tab

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';

@Component({
 selector: 'app-multi-tab-pagination',
 templateUrl: './multi-tab-pagination.component.html',
 styleUrls: ['./multi-tab-pagination.component.css']
})
export class MultiTabPaginationComponent implements OnInit {

 dataSource1 = new MatTableDataSource<any>([]);
 dataSource2 = new MatTableDataSource<any>([]);

 totalLength1 = 100; // Total items for Tab 1
 pageSize1 = 10;   // Items per page for Tab 1

 totalLength2 = 200; // Total items for Tab 2
 pageSize2 = 20;   // Items per page for Tab 2

 @ViewChild('paginator1', { static: true }) paginator1: MatPaginator;
 @ViewChild('paginator2', { static: true }) paginator2: MatPaginator;

 ngOnInit() {
  // Assuming fetchData1() and fetchData2() are methods to fetch data for each tab
  this.fetchData1();
  this.fetchData2();
 }

 // Fetch Data for Tab 1
 fetchData1() {
  // Simulating data fetching, replace with your API call
  const data1 = Array.from({ length: 100 }).map((_, i) => `Item ${i + 1}`);
  this.dataSource1 = new MatTableDataSource<any>(data1);
  this.dataSource1.paginator = this.paginator1;
 }

 // Fetch Data for Tab 2
 fetchData2() {
  // Simulating data fetching, replace with your API call
  const data2 = Array.from({ length: 200 }).map((_, i) => `Record ${i + 1}`);
  this.dataSource2 = new MatTableDataSource<any>(data2);
  this.dataSource2.paginator = this.paginator2;
 }

 // Pagination Event for Tab 1
 onPaginateChange1(event) {
  const pageIndex = event.pageIndex;
  const pageSize = event.pageSize;
  // Fetch updated data based on pageIndex and pageSize for Tab 1
  this.fetchData1();
 }

 // Pagination Event for Tab 2
 onPaginateChange2(event) {
  const pageIndex = event.pageIndex;
  const pageSize = event.pageSize;
  // Fetch updated data based on pageIndex and pageSize for Tab 2
  this.fetchData2();
 }
}

Step 4: Linking Paginators to Tabs

Ensure that each MatPaginator is correctly linked to its corresponding tab by using the @ViewChild decorator to access the paginator component for each tab.

Step 5: Customize Pagination Behavior

You can customize pagination behavior by modifying properties such as pageSizeOptions, length, and showFirstLastButtons. For instance:

<mat-paginator
 [length]="totalLength1"
 [pageSize]="pageSize1"
 [pageSizeOptions]="[5, 10, 20]"
 showFirstLastButtons
 aria-label="Select page">
</mat-paginator>

Step 6: Test and Optimize

Now, test your Angular app to ensure that pagination works smoothly across all tabs. Check that the pagination for each tab operates independently and efficiently fetches data for each page when navigating through pages.

Key Takeaways

• Modularity: By defining separate data sources and paginators for each tab, you ensure clean and modular code.

• Customizable Pagination: Angular Material provides a highly customizable pagination component that can be adapted for different data sets.

• User Experience: Proper pagination helps improve the user experience, especially when dealing with large datasets across multiple tabs.