Hide mat-rows in mat-table when data is loading

So the "trick" was to use [hidden]

<tr mat-row *matRowDef="let row; columns: displayedColumns;" [hidden]="isLoading"></tr>

However I didn't end up using this solution as it made the table "jumpy". Instead I opted to put a spinner in the table footer.

Can't use two structural directives on one element. use ng-container

<ng-container *ngIf="!isLoading">
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

<ng-container>

Related