ngx-pagination does not render next items when click I next, first page works fine - Angular 11 (SOLVED)

Question

I have the following issue:

Yesterday I started following this tutorial in order to learn how to use ngx-pagination, because I needed server-side pagination.

The issue is that the first 10 items that I want will be rendered properly, however if I click next (which will make my parameter: ?skip=0&take=10 go to ?skip=1&take=10 ) it will take me to the next page, however the next 10 items won't show but I can confirm that they are being called through GET properly, images at the end will show how it looks like.

The code is as follows:

// department.service.ts
...
    getAll(params: any) : Observable<Department[]> {
        return this.httpClient.get<Department[]>(this.url, { params })
        .pipe(
          retry(2),
          catchError(this.handleError)
       )
     }
...

// department.component.ts
...
departments: [];
page = 1;
count = 0;
totalItems = 10;
...
ngOnInit() {
    this.retrieveAllDepartments()
  }

  getRequestParams(page: number, totalItems: number): any {
    // tslint:disable-next-line:prefer-const
    let params: any = {};

      params[`skip`] = page - 1;

      params[`take`] = totalItems;

    return params;
  }

  retrieveAllDepartments(): void {
    const params = this.getRequestParams(this.page, this.totalItems);

    this.departmentService.getAll(params)
    .subscribe(
      response => {
        this.departments = response;
        this.count = response.length;
      });
  }

  handlePageChange(event: number): void {
    this.page = event;
    this.retrieveAllDepartments();
  }

// department.component.html
...
   <tr *ngFor="let department of departments | paginate: { 
       itemsPerPage: itemsPerPage,
       currentPage: page,
       totalItems: totalItems }">
       <td>{{department.name}}</td>
   </tr>
...
 <pagination-controls
 [responsive]="true"
 (pageChange)="handlePageChange($event)"
 ></pagination-controls>

And here is the image of how it actually looks like on my localhost and what happens when I click NEXT or to go to page 2, as you can see, the response does bring me the next 10 items (does not show in the image but I can confirm they are 10, different items)

The image above is page 1 skip=0 as you can see and the image below is page 2 skip=1

However, as you can see, even though my.network did bring the payload with the page 2 correctly, it does not show on my screen, the table is empty, but the items were retrieved.

What am I doing wrong here?

Answer 1

you make a confusion between totalItems and itemsPerPage

departments: [];
page = 1;
count = 0;
totalItems:number; ====> this should be **itemsPerPage**
itemsPerPage = 10
...
ngOnInit() {
    this.retrieveAllDepartments()
  }

  getRequestParams(page: number, itemsPerPage : number): any {
    // tslint:disable-next-line:prefer-const
    let params: any = {};

      params[`skip`] = page - 1;

      params[`take`] = itemsPerPage ;

    return params;
  }

  retrieveAllDepartments(): void {
    const params = this.getRequestParams(this.page, this.itemsPerPage);

    this.departmentService.getAll(params)
    .subscribe(
      response => {
        this.departments = response;
        this.count = response.length;
      });
  }

  handlePageChange(event: number): void {
    this.page = event;
    this.retrieveAllDepartments();
  }