[Fixed] How to show/hide material table footer programmatically?

Issue

Is there a way to show/hide the the material table footer using an @Input() variable? I am trying to build a custom table component which may or may not have a footer, like so

<my-component [showFooter]="false"></my-component>

The obvious thing I thought about is just putting an *ngIf on the mat-footer-row inside the component definition. But when I try to use

<tr *ngIf="showFooter" *matFooterRowDef="displayedColumns; sticky: true"></tr>

or

<td *ngIf="showFooter" mat-footer-cell *matFooterCellDef>{{someValue}}</td>

I get the following error from the compiler.

Can't have multiple template bindings on one element. Use only one attribute prefixed with *

What is the correct way to implement this if I cannot achieve it using an *ngIf?

Solution

You can use only one structural directive (denoted by the *) on a single element.

You can use ng-container:

<ng-container *ngIf="showFooter">
  <td mat-footer-cell *matFooterCellDef>{{someValue}}</td>
</ng-container>