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

Question

I'm trying to hide the rows of a MatTable when its loading.

I can't do this: (see StackBlitz for entire code)

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

as MatTable will throw all kinds of errors :(

I can't put *ngIf="!isLoading" inside the MatRow as it already have a structural directive.

I would like to avoid CSS trickery.

What am I not seeing? Please enlighten me.

Answer 1

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.