How to show/hide material table footer programmatically?

user_3530698 0
Viewed 3895

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?

angular-material angular
4 Answers

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>
user_13465470

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

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

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">
...
user_5558300

I used the hidden-attribute, so no extra CSS is required:

<tr mat-footer-row *matFooterRowDef="displayedColumns" [hidden]="!showFooter"></tr>
user_40493710
Related