CODEWITHSUNDEEP
angularpaginationangular-material
mahdi.gh
mahdi.gh

Reputation: 85

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

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.

Upvotes: 3

Views: 16575

Answers (2)

Anna Luz Fisher
Anna Luz Fisher

Reputation: 1

if you need the backend to paginate results, i have my paginator like this

<mat-paginator
      #paginator
      (page)="pageChangeEvent($event)"
      [length]="totalResults"
      [pageSize]="pageLimit"
      [pageIndex]="pageIndex"
      [pageSizeOptions]="[5, 10, 20]"
      showFirstLastButtons
      aria-label="Select page of data">
</mat-paginator>

and then on the pageChangeEvent in the TS file

  pageChangeEvent(event: {
    length: number;
    pageIndex: number;
    pageSize: number;
    previousPageIndex: number;
  }) {
    this.pageLimit = event.pageSize.toString();
    this.pageIndex = event.pageIndex;
    this.getMoreData();
  }




  getMoreData() {
    this.visitService
      .getFollowUps(
        this.pageLimit,
        this.pageIndex,
//any other params
      )
      .subscribe(
        (data: any) => {
          this.loading = false;
//for other uses not in the table
          this.data = data.results;
          this.pageIndex = data.page_index;
          this.pageLimit = data.page_limit;
          this.totalResults = data.total_results;
//assign it to the data source as well
          this.dataSource.data = data.results;
        },
        (err) => {
          this.loading = false;
          console.log(err);
        }
      );
  }

Upvotes: 0

atiyar
atiyar

Reputation: 8315

For client side pagination, the MatTableDataSource has pagination, sorting and filtering functionality built-in to it.

Follow the steps below -

  1. Use MatTableDataSource type as the dataSource and initialize it with an empty array
  2. Set the data property of MatTableDataSource once data is received
  3. Get a reference of the table's paginator with @ViewChild
  4. Implement AfterViewInit to set the paginator property of MatTableDataSource once the view is initialized

Your final component code should look something like -

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

    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  // <-- STEP (2)
        );
    }
    
    ngAfterViewInit(): void {
        this.list_product.paginator = this.paginator;  // <-- STEP (4)
    }
}

You should explore the documentation for further details.

Upvotes: 6

Related Questions