0

I have an array of items filled up on ngOnInit. below is my view 

<mat-grid-list cols="4" rowHeight="150px">
  <mat-grid-tile *ngFor="let item of lubricants; let i = index">
    <img src="../assets/icons/washingIcons/upArrow.png">
  </mat-grid-tile>
</mat-grid-list>

and this is my ts file:

import { Component, OnInit } from '@angular/core';
import { SellLubricantsService} from  './sell-lubricants.service'

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

  lubricants:any;
  constructor(private sellLubServ:SellLubricantsService) { }

  ngOnInit() {
    this.getAllLubricants();
  }

  getAllLubricants(){
    this.sellLubServ.getAllLubricants().subscribe(
    Response=>{this.lubricants=Response;},
    error=>{alert("error")}
    );
  }
}

this is working well to fill my page with tiles with 100 items but my need is to prevent loading all data when the array get bigger like 1000 items or more by setting pages. Many thanks for any help, i tried to follow the angular documentation but i didn't get how to apply it with my need. and i already imported the needed modules.

SiddAjmera
  • 38,129
  • 5
  • 72
  • 110
Ali
  • 1,633
  • 7
  • 35
  • 58
  • Is your data paged at server side? Or will the server return all items, and your front end will ignore any records outside of the desired page? – user184994 Oct 05 '18 at 18:55
  • You should implement it on your server and expose your API to expect queryParams like `pageNumber` and `resultsPerPage` and then you can respond back with the paged data accordingly. – SiddAjmera Oct 05 '18 at 19:02
  • @user184994 no the data isn't paged from the back-end,all item will be handled front-end. so assume i have 1000 items, i want all these items to be set up to 10 page, each page carry 100 item. is this possible to be done on the fron-end? – Ali Oct 05 '18 at 21:31
  • Possible duplicate: https://stackoverflow.com/questions/50216890/angular-client-side-pagination – gr4viton Oct 06 '18 at 09:29

2 Answers2

0

Back-end side pagination

  1. Modify the existing or create a new service function which accepts page and data/page parameters.
  2. Use HttpParams to send request like that: api/lubricants?page=2&per_page=50
  3. Modify the back-end to provide results based on these params.

This approach is inspired by github v3 api. More information about pagination solution in github v3 is here.

gr4viton
  • 1,434
  • 1
  • 8
  • 21
0

if you want to prevent the loading of more than 100 items at a time then thats something that needs to be handled from the back end. its not something you should manage from angular. your service shouldnt have to worry about how many objects its getting. if you dont mind loading a lot of objects at once and just need pagination when displaying them, this may be an easy fix https://www.npmjs.com/package/ngx-pagination

pablito94
  • 63
  • 8