How to bind pager with http request from service

[Pedro]

Hi,

I have a service with a http request to an api that returns a Observable<Pendentes[]>.

I need to call the service in my component, but I can't get the pagination working.

I attached some prints of my code.

 

Best regards,
Pedro Marquinhos

[Slavena]

Hello Pedro,

Thank you for the provided details and screenshots.

I am not entirely sure what the issue at hand is based on the provided information. I will try to address this case to the best of my understanding.

In order to split the data correctly into pages, the Pager needs the skip, pageSize and total properties set. When the page is changed, the Pager updates the skip and take properties and emits them in the pageChange event. The developer can then retrieve and utilize them for the server request that will return the data corresponding to the current page, e.g.:

public onPageChange(state: PageChangeEvent): void {
    this.skip = state.skip;
    this.service.query({ skip: this.skip, take: 2 });
}

Here is a sample StackBlitz demo that demonstrates utilizing the Pager with remote data:

https://stackblitz.com/edit/angular-pffysc?file=src%2Fapp%2Fapp.component.ts

Please note that this is just an example and backend communication and data retrieval are in the hands of the developer and are out of the support scope.

I hope this steers you in the right direction.

Regards,
Slavena
Progress Telerik