DEV Community

Discussion on: Angular Material Pagination Datasource

Collapse
jparlato profile image
John P. Parlato

Could you provide an example of the user service. I'm having trouble understanding how it would be constructed to be used in these components.
Thank you.

Collapse
n_mehlhorn profile image
Nils Mehlhorn Author • Edited on

Hey John, sorry for the late reply. The example on StackBlitz is implementing a user service, however, that one is faking server-requests: stackblitz.com/edit/angular-pagina...

You'd need to implement the same signature but make HTTP-requests to your paginated server endpoint


export class UserService {
  constructor(private http: HttpClient) {}

  page(request: PageRequest<User>, query: UserQuery): Observable<Page<User>> {
    // parse HTTP-GET parameters that your server understands, e.g:
    const params = {
      pageNumber: request.page, 
      pageSize: request.size,
      sorting: `${request.sort.property},${request.sort.order}`,
      text: query.search,
      registrationDate: query.registration
    }
    // make request
    return this.http.get("/users", {params}).pipe(
      map(/* map to Page<User>> if the type is different */)
    )
  }
}

Hope this helps, otherwise please ask further, I'll reply timely now

Collapse
jparlato profile image
John P. Parlato

That is just what I needed. I want to thank you for your article and your response. Take care.

Thread Thread
n_mehlhorn profile image
Nils Mehlhorn Author

Most welcome! You might want to join my mailing list so I can notify you when I publish something new :)