[Fixed] How to add pagination in angular material table that bind to API response

Issue

I’m new to angular. In my project shown list of products and its work correctly.

My HTML code is below :

<table mat-table [dataSource]="list_product" style="width: 20%;">
    <!-- id Column -->
    <ng-container matColumnDef="id" style="width: 20%;">
        <th mat-header-cell *matHeaderCellDef style="align-items: center;"> id </th>
        <td mat-cell *matCellDef="let list_product"> {{list_product.id}} </td>
    </ng-container>

    <!-- description Column -->
    <ng-container matColumnDef="description">
        <th mat-header-cell *matHeaderCellDef> Name </th>
        <td mat-cell *matCellDef="let list_product"> {{list_product.description}} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

and my TypeScript code is –

import { Component, OnInit,ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { analyzeAndValidateNgModules } from '@angular/compiler';
import { MatPaginator} from '@angular/material/paginator';
import { MatTableDataSource} from '@angular/material/table';

@Component({
    selector: 'app-basic',
    templateUrl: './basic.component.html',
    styleUrls: ['./basic.component.scss']
})
export class BasicComponent implements OnInit {

    public list_product:any=[];
    displayedColumns: string[] = ['id', 'description'];
    @ViewChild(MatPaginator) paginator: MatPaginator;

    constructor(private http:HttpClient) { }

    ngOnInit(): void {
        this.get_data();
        this.list_product.paginator = this.paginator;
    }

    get_data(){
        this.http.get<any>("http://localhost:3000/listp").subscribe(
            res => this.list_product = res
        )
    }
}

Pagination does not work and all of list are shown. Pagination buttons does not work in html file.

Solution

For client side pagination, you can use MatTableDataSource as the data source for your material table. It has pagination, sorting and filtering functionality built-in to it.

Try the following –

1. change list_product to a MatTableDataSource type and initialize it with an empty array –

public list_product = new MatTableDataSource<any>([]);

2. in the get_data() mehod set the data property of the data source –

get_data() {
    this.http.get<any>("http://localhost:3000/listp").subscribe(
        res => this.list_product.data = res
    )
}

3. get a reference of the table’s paginator with @ViewChild –

@ViewChild(MatPaginator) private paginator: MatPaginator;

4. implement AfterViewInit and once the view initialized, set the paginator property of the data source –

ngAfterViewInit(): void {
    this.list_product.paginator = this.paginator;
}

Your final component code should look something like –

export class BasicComponent implements OnInit, AfterViewInit {
    
    public list_product = new MatTableDataSource<any>([]);
    displayedColumns: string[] = ['id', 'description'];
    @ViewChild(MatPaginator) private paginator: MatPaginator;

    constructor(private http:HttpClient) { }

    ngOnInit(): void {
        this.get_data();
    }

    get_data(){
        this.http.get<any>("http://localhost:3000/listp").subscribe(
            res => this.list_product.data = res
        );
    }
    
    ngAfterViewInit(): void {
        this.list_product.paginator = this.paginator;
    }
}

You should explore the documentation for further details.