pagination-use.component.html

<main>
    <app-movie-card 
        *ngFor="let movie of movies$ | async"
        [movie]="movie]
    ></app-movie-card>
</main>

<app-pagination
    [currentPage]="page$ | async"
    [totalPages]="totalPages$ | async"
    [size]="size$ | async"
    [routerLinkBase]="['/movies']"
></app-pagination>

pagination-use.component.ts

export class MovieListPageComponent {
    page$: Observable<number> = this.activatedRoute.queryParams.pipe(map(({page}) => page ? +page : 1))
    size$: Observable<number> = this.activatedRoute.queryParams.pipe(map(({size}) => size ? +size : 24))
    
    movies$: Observable<Movie[]>
    totalPages$: Observable<number>
    
    constructor(
        private movieService: MovieService, 
        private activatedRoute: ActivatedRoute
    ) {
        this.movies$ = combineLatest({
            page: this.page$,
            size: this.size$,
        }).pipe(
            debounceTime(200),
            switchMap(({ page, size }) => {
                return this.movieService.find({ page, size})
            })
        )
        
        this.totalPages$ = combineLatest({
            total: this.movieService.count(),
            size: this.size$,
        }).pipe(
            switchMap(({ total, size }) => {
                return Math.ceil(total / size)
            })
        )
    }
}