javascript - Angular visa element endast om det överskrider viewport - Fixa ExpressionChangedAfterItHasBeenCheckedError

Jag försöker att visa en andra paginering längst ner i min tabell när tabellen överskrider visningsområdet. Men jag får alltid ett ExpressionChangedAfterItHasBeenCheckedError. Jag har försökt använda ChangeDetectorRef, en egenskap med onResize med en HostListener, men jag verkar alltid bara få ett annat fel. Jag hoppas att någon kan hjälpa mig att hitta det "Angular-sättet" att lösa detta problem.

Detta är min mall:

...
<div #tableContainer class="table-container">
    <table mat-table [dataSource]="messages" class="messages">
      [...]
    </table>
</div>

<mat-toolbar *ngIf="isOutOfViewport(tableContainer)" class="toolbar">
  <mat-toolbar-row>
    <app-manual-paginator class="paginator"
                          [length]="resultCount"
                          [(pageSize)]="pageSize"
                          [pageSizeOptions]="[25, 50, 75, 100]"
                          [(pageIndex)]="page"
                          [showFirstLastButtons]="true"
                          (changePage)="changePage()">
    </app-manual-paginator>
  </mat-toolbar-row>
</mat-toolbar>
...

Metoden inne i komponenten som jag kallar:

public isOutOfViewport(element: Element): boolean {
  const bounds = getViewportOutOfBounds(element);
  return bounds.top || bounds.bottom;
}

Och verktygsmetoden som används för att hitta gränserna (fick den från en onlineguide: https://gomakethings.com/how-to-check-if-any-part-of-an-element-is-out-of-the-viewport-with-vanilla-js/):

export function getViewportOutOfBounds(element: Element): Bounds {

    // Get element's bounds
    const bounds = element.getBoundingClientRect();

    // Check if it's out of the viewport on each side
    const out: Bounds = {
    top: undefined,
    bottom: undefined,
    left: undefined,
    right: undefined,
    any: undefined,
    all: undefined
  };
    out.top = bounds.top < 0;
    out.left = bounds.left < 0;
    out.bottom = bounds.bottom > (window.innerHeight || document.documentElement.clientHeight);
    out.right = bounds.right > (window.innerWidth || document.documentElement.clientWidth);
    out.any = out.top || out.left || out.bottom || out.right;
    out.all = out.top && out.left && out.bottom && out.right;

    return out;
};

Jag har verifierat att metoderna faktiskt fungerar på egen hand, men i den här konstellationen verkar jag inte kunna få det att fungera.