Angular 5 Material HTTP Data With Pagination

Question

I am getting data from a backend resource and creating an angular material data table. I retrieve a set of 50 rows at a time.

In the returned json object i get a link to the next 50 rows. How can i implement pagination with this method. The documentation is not very clear.

list.component.html

<div class="example-container mat-elevation-z8">
    <mat-table #table [dataSource]="dataSource">

        <ng-container matColumnDef="Identifier">
            <mat-header-cell *matHeaderCellDef>Identifier</mat-header-cell>
            <mat-cell *matCellDef="let job"> {{job.job_id}} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="ProductName">
            <mat-header-cell *matHeaderCellDef>Product Name</mat-header-cell>
            <mat-cell *matCellDef="let job"> {{job.product_id}} </mat-cell>
        </ng-container>


        <ng-container matColumnDef="Status">
            <mat-header-cell *matHeaderCellDef>Status</mat-header-cell>
            <mat-cell *matCellDef="let job"> {{job.status}} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="DateTime">
            <mat-header-cell *matHeaderCellDef>Date & Time</mat-header-cell>
            <mat-cell *matCellDef="let job"> {{job.reg_time | date:'d/MMM/y HH:mm'}} </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="show(row)"></mat-row>
    </mat-table>

    <mat-paginator [pageSize]="15">
    </mat-paginator>

list.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { JobService } from './../../core/services/job/job.service';
import { Router } from '@angular/router';

import { Observable } from 'rxjs/Observable';
import { merge } from 'rxjs/observable/merge';
import { of as observableOf } from 'rxjs/observable/of';
import { catchError } from 'rxjs/operators/catchError';
import { map } from 'rxjs/operators/map';
import { startWith } from 'rxjs/operators/startWith';
import { switchMap } from 'rxjs/operators/switchMap';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';

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

    displayedColumns = ['Identifier', 'ProductName', 'Status', 'DateTime']
    dataSource = new MatTableDataSource();

    @ViewChild(MatPaginator) paginator: MatPaginator;
    @ViewChild(MatSort) sort: MatSort;

    constructor(private jobService: JobService,
        private router: Router,
        private fb: FormBuilder) { }

    ngOnInit() {

        this.jobService.all().subscribe((res) => {
            this.dataSource = res.data;
            console.log(res);
        });

    }

    show(job) {
        this.router.navigate(['reports/', job.job_id]);
        console.log(job);
    }

}

job.service.ts

import { Injectable } from '@angular/core';
import { ApiService } from './../api/api.service';

@Injectable()
export class JobService {

    constructor(private apiService: ApiService) { }

    all(params = null) {

        let endpoint = "<removed>/api/v1/jobs"

        return this.apiService.get(endpoint,params);

    }

}

Data object - next (this returns another 50 starting from 50.

next: "<removed>/api/v1/jobs?offset=50"

I need someway to pagination. I can call my service again passing in the next url to retrieve the next 50 results. I don't know how to tie this in with the mat paginator.

Answer 1

Mat-Paginator has a property (page) that will emit an event when the paginator changes the page size or page index. In your case, from what I understand, whenever the page index changes, you want to do another API call with a different offset to get the correct set of data.

You can replace your current mat-paginator to look like this:

mat-paginator

<mat-paginator #paginator
               [pageIndex]=0
               [pageSize]=15
               (page)="getNext($event)">
</mat-paginator>

The event passing into getNext($event) will contain a pageSize and pageIndex that you can use to calculate the offset.

In your list component, you can make a function that can take in a pageSize and pageIndex, calculate the offset, and then do an API call with the new offset.

list.component.ts

  getNext(event: PageEvent) {
    offset = event.pageSize * event.pageIndex
    // call your api function here with the offset
  }

Please let me know if you have anymore questions. Good luck!