Angular: trying to get ngx-pagination to work

Question

I am new to Angular and I have no spent hours trying to get pagination to work correctly. I am working in Angular 9.

in app.module I import ngx-pagination

import { NgxPaginationModule } from 'ngx-pagination';

in home-component I have I built a list of posters from a web service.

    <div class="movie-card" *ngFor="let media of filteredMovies | paginate: {
      id: 'pagingID',
      itemsPerPage: 1,
      currentPage: page,
      totalItems: totalRecords }">
        <div
         Some html
         </div>

      </div>
      <!--movie-card-->

      <pagination-controls> id="pagingID" (pageChange)="onPageChange($event)") </pagination-controls>

If I leave the id in the paginate statement I see "Next >>" and nothing else in the pager bar. It is of course not clickable.
If I remove the id in the paginate statement I see the pager bar numbers and with "1" being highlighted in blue. However, selecting any other number does not result in the onPageChange event firing (it only logs to console) nor does it result in anything other than "1" being highlighted. Am I missing something?

UPDATE I made some progress on this. I tried adding a second ngfor / page bar block above my current code and it works perfectly. When I change pages the data in the new pager the page shifts correctly. What is odd is that the page also shifts in the current (broken) pager after removing the ID property. However, I still can not click on that pager directly.

          <div *ngFor="let media of filteredMovies | paginate: { itemsPerPage: 2, currentPage: page }">{{ media.movie.title }}</div>
            <pagination-controls (pageChange)="onPageChange($event)"></pagination-controls>

            <!-- This is the ORIGINAL block-->
            <div *ngIf="isMovie">
            <div *ngFor="let media of filteredMovies | paginate: {itemsPerPage: 2, currentPage: page }">
              some html
            <pagination-controls> (pageChange)="onPageChange($event)") </pagination-controls>