Server side pagination [ Spring MVC & Angular 4 ]

Question

I'm currently working on getting pages of data from server using Spring MVC and Angular to get the work done, but i'm facing a problem when i try to change the page.

profil-management.component.html

             <tr
              *ngFor="let profil of profilList | paginate: { id:'profils_pages', itemsPerPage: pageSize, currentPage: p, totalItems: totalObjectCount } ">
              <td><a (click)="onSelect(profil)" data-toggle="modal" data-target="#myModal2"
                     style="text-decoration: none; cursor: pointer">{{profil.eprLabel}}</a>
              </td>
              <td>
                <button type="submit" class="ti-pencil" (click)="onSelectUpdate(profil)" data-toggle="modal"
                        data-target="#myModal"></button>
              </td>
              <td>
                <button type="submit" class="ti-trash" data-toggle="modal" data-target="#deleteModal"
                        (click)="onSelect(profil)"></button>
              </td>
            </tr>
            <div style="text-align: center; margin-left: 35%; margin-top: 3%;">
              <pagination-controls id="profils_pages"
                                   maxSize="10"
                                   (pageChange)="p = getServerData($event)"
                                   directionLinks="true"
                                   autohide="true">
              </pagination-controls>

I think the problem is in getServerData(event)

profil-management.component.ts

   getServerData(event) {
   this.profilManagementService.getProfilsPagination(event - 1).subscribe(
    res => {
     this.profilList = res.json().ecomProfils;
    }, error => {
    }
   );
 }

The pagination cursor doesn't change yet it brings the second page from the server.

I'm using ngx-pagination in this code.

Answer 1

you need to return event back from your "getServerData" function. Event is nothing but a page number which is getting assign to p variable in pagination-controls directive.