MatPaginator - Prevent Page Size Changes when there are "unsaved changes"

Question

I have an Angular Material Table that takes accepts data from an API, and performs pagination on the frontend. These records that come from the API, frontend users can enable/disable a part of them with a checkbox visible in each row.

What I would like to see happen is when they attempt to change pages, or page sizes, they get prompted via an Angular Material Dialog to either stay on the current page, or leave the current page and discard their changes.

I've managed to do this just fine for the page number/pageIndex, but preventing this for page size changes is tricky. What happens is before I can prevent any change in page size when there are unsaved changes, the paginator/mat-table has already changed the page size and number of records visible before the "unsaved changes" dialog pops up.

I've tried forcibly setting the page size of the paginator to the current value, before it changes to what the emitted event is asking for. After the page event gets emitted by the paginator, I've used @ViewChild(matPaginator) to set the page size, before the result of the dialog prompt is confirmed through the MatDialog.afterClosed subscription to either stay on that current page size or change it.

The farthest I've got is that choosing to stay on the current page size through the dialog does keep it on that current size, but at this point I can see behind the dialog that it has already updated the table to the newly selected size.

I've also tried @ViewChild(matSelect) to manipulate the page size select in the paginator directly, and the events surrounding it, but this did not produce any desirable results. In fact, I have very little control over that it seems, even through the paginator object itself.

I've even tried manipulating the HTML inside the select but then future page size changes result in a disconnect between what the user selects and what the dropdown displays as selected.

The ideal solution would be that they click a size in the dropdown of sizes when there are unsaved changes, then prompts them to discard changes or stay, then if they discard, it then does the size change.

I've spent a good many hours on this, if anyone has suggestions on how this might be accomplished, I would greatly appreciate you sharing such suggestions.

Here's where my code stands right now, for paging functionality:

onUpdatePaging(pageEvent: PageEvent): void {
// Set paginator to current values before allowing a page change
// this.paginator is the @ViewChild(matPaginator) object
this.paginator.pageIndex = this.pageIndex;
const currentPageSize: number = this.pageSize ? this.pageSize : pageEvent.pageSize;
this.paginator.pageSize = this.pageSize;
// trigger unsaved changes dialog only when there are unsaved changes and page size is not changing
if (this.unsavedChanges && pageEvent.pageSize === currentPageSize) {
  // opens dialog, returns that matDialogRef object
  this.showUnsavedChangesDialog().afterClosed().subscribe((result) => {
    if (result) {
      // user clicked yes and is discarding changes
      this.cancelChanges.emit();
      this.paginator.pageIndex = pageEvent.pageIndex;
      this.paginator.pageSize = pageEvent.pageSize;
      this.paging.emit(pageEvent);
    }
  });
}
else {
  // user clicked no and is staying on current page
  this.paginator.pageIndex = pageEvent.pageIndex;
  this.paginator.pageSize = pageEvent.pageSize;
  this.paging.emit(pageEvent);
}

}