Pagination using Observables in Angular

A practical example using Angular observables.

Published: 6/6/2024

When the current page number subject it changed, the emit triggers the page data to update.

export class HomePage {
  currentPageNo$ = new BehaviorSubject<number>(1);

  currentPageData$ = this.currentPageNo$.pipe(
      switchMap((currentPage) => this.postsService.getPostsDate(currentPage)),
      map((res: any) => console.log(res.data))
  );

  nextPage() {
    this.currentPageNo$.next(this.currentPageNo$.value + 1);
  };

  prevPage() {
    this.currentPageNo$.next(this.currentPageNo$.value + 1);
  };
}
  • import { BehaviorSubject, map, switchMap } from 'rxjs';
  • constructor(private postsService: PostsService) {}