ngx-pagination angular 8 Observables next page not populating on FE

Question

I have a problem with Observables used in this implementation. I am new to Observables. I am implementing ngx-pagination on existing component with list of users. Problem is that next page is not populating results (only page 1 has 10 first results) but API call is being made and I can see the results in Network tab. I think it's something with Observables. Any help will be highly appreciated.

component

  pageSize: any;
  pageNumber = 1;
  count = 0;

 ngOnInit() {
    this.users$ = this.userapiService.getUsers(this.pageNumber);
  }

  handlePageChange(event) {
    this.pageNumber = event;
    this.users$ = this.userapiService.getUsers(this.pageNumber);
  }

html

      <tr *ngFor="let user of users$.getValue() | paginate: { itemsPerPage: pageSize, currentPage: pageNumber }">
               
     <pagination-controls 
                    (pageChange)="handlePageChange($event)"
                    previousLabel="Previous"
                    nextLabel="Next"
            ></pagination-controls>
 

service

 getUsers(pageNumber: number): Observable<User[]> {

        let params = new HttpParams();

        params = params.append('id', id).append('pageNumber', (pageNumber - 1).toString())
            .append('pageSize', constants.pageSize);

        this.httpService.httpGet(this.Endpoint, params)
            .subscribe(
                (response: User[]) => {
                    this.users$.next(response
                        .filter(user =>  user
                        ));

                });
        return this.users$;
    }

Answer 1

As the author of RxJS 5 says, using getValue() in observable chains is a sign of you're doing something wrong .

In this scenario, users$ is an observable . To get the fresh values of the observable, we need to subscribe and listen. We do this with the async pipe in Angular's HTML side as follows:

<tr *ngFor="let user of (users$ | async) | paginate: { itemsPerPage: pageSize, currentPage: pageNumber }">