I'm gonna be very specific with my question, hoping for an equally specific answer. I've combed online, and the Angular docs on the subject is as vague for real life cases as asking you to pick a needle from the ocean. Ooh Angular docs... What I have done so far <mat-paginator (page)="pageEvent = $event" #paginator [length]="pageLength" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions"> </mat-paginator> And this in my component pageLength: number; pageSize: 5; pageSizeOptions = [5, 10, 25, 100]; and then I update the pageLength when the endpoint response is in like so: loadRequests() { this.busy = true; this.request_service.get_requests() .subscribe((res) => { console.log(res); this.requests = res['requests']; this.pageLength = this.requests.length; // let's assume length = 1000 }); } The above renders renders the UI for the pagination nicely in the browser The endpoint being consumed via .get_requests(), for the sake of simplicity, returns only 1000 fixed items. Now, this is how I'm rendering my list at the moment: <mat-card *ngFor="let request of requests"> <mat-card-title> {{ request.title }}</mat-card-title> </mat-card> So with the above preamble, what steps are my left to complete to get pagination to work with this condition in mind: The pagination doesn't keep going to endpoint to pull each list of items for each pageIndex. After receiving the 1000 items at first hit from the endpoint, then pagination chunks this length of items up locally on the client side. No more API calls. Continue reading...
