How to show/hide material table footer programmatically?

Question

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?

Answer 1

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>

Answer 2

The other option using CSS and mat-footer-row:

<tr mat-footer-row *matFooterRowDef="displayedColumns" [style.display]="showFooter ? 'table-row' : 'none'"></tr>

Answer 3

You can hide it with css:

.mat-table {

  tfoot {
    display: none;
  }

  &.footer-visible {
    tfoot {
      display: table-footer-group;
    }
  }
}

then inside table:

<table mat-table [class.footer-visible]="false">
...