Angular Mat-Table finished rendering Event / Mat Paginator Loading Spinner

Question

I am using an Angular Material Table with a rather big, pre queried Datasource. Now, everytime i change the Table Pages with the built in Paginator, i have a short Delay before the new Table-Rows are rendered and i would like to display a Loading Spinner in the meantime.

The Problem is, the Paginator does only fire a single Event when the Table-Page starts changing and up to now, I did not find a solution to find out, when the new Rows are rendered completely. (This would be the moment when I would hide the loading Spinner)

I know Server Side Pagination would solve this Issue but i would prefer another Possibility..

Has anybody recommendations for my Problem?

Welcome to SO. Please post the code what you tried. – Allabakash Oct 28 '19 at 14:53 — Allabakash, Oct 28 '19 at 14:53

score 1 · Answer 1 · answered Jan 21 '21 at 17:28

In my opinion, the less hacky way to do this is to inject NgZone as a dependency in your component and to subscribe to the onStable observable.

Let's say you have a changePage function handling the page changing. You can then do this :

this.changePage(newPage);
this.zone.onStable.pipe(take(1)).subscribe(() => {
  console.log('Do whatever you want, the table is rendered');
});

score 0 · Answer 2 · answered Aug 19 '20 at 19:17

The way I did it is using the (undocumented) "last" local variable that is set to true for the last row in the table. Using it I add a "last-row" class to an element in the last row. Then using MutationObserver I detect when that element is inserted in DOM.

Even if this is basically a pooling because the MutationObserver handler is executed every time when there is a DOM change, we are able to execute a piece of code when the last row is inserted in DOM. I haven't tried it with a Paginator yet.

I got the idea to use "last" local variable seeing that ngFor has it and I thought that table should be implemented as an ngFor or it should use one ...

<table mat-table [dataSource]="(results$ | async)?.drivers" class="mat-elevation-z8">
<ng-container matColumnDef="colId">
    <th mat-header-cell *matHeaderCellDef> ID </th>
    <td class="cell-id" mat-cell *matCellDef="let driver; let i = index; let isLastRow = last">
        <div class="no-wrap-ellipsis" [ngClass]="{'last-row': isLastRow}">{{driver.driverId}}</div>
    </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="scheduleTable_displayedColumns; sticky: true;"></tr>
<tr mat-row *matRowDef="let row; columns: scheduleTable_displayedColumns;"></tr>

  protected mutationObserverToDetectLastRow: MutationObserver;

  ngOnInit(): void {
    this.initMutationObserverToDetectLastRow();
  }

  private initMutationObserverToDetectLastRow = () => {
    this.mutationObserverToDetectLastRow = new MutationObserver(_ => this.mutationObserverToDetectLastRowHandler());
    this.mutationObserverToDetectLastRow.observe(document, { attributes: false, childList: true, characterData: false, subtree: true });
  }

  protected mutationObserverToDetectLastRowHandler = () => {
    if (document.body.contains(document.body.querySelector(".last-row"))) {
      console.log("Last row was displayed");
    }

    this.mutationObserverToDetectLastRow.disconnect();
  }

  ngOnDestroy(): void {
    this.mutationObserverToDetectLastRow.disconnect();
  }

What if we add new rows periodically? Don't want to use setTimeout... — Simon, Oct 14 '20 at 19:02

Angular Mat-Table finished rendering Event / Mat Paginator Loading Spinner

2 Answers2

Linked