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.