6

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?

4 Answers 4

8

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

<tr mat-footer-row *matFooterRowDef="displayedColumns" [hidden]="!showFooter"></tr>
1
  • hidden is perfectly appropriate and may be simpler than extending the component in some cases.
    – jaasum
    Commented Mar 5, 2022 at 0:48
7

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>
2
  • 2
    Didn't work for me, yelling a matColumnDef cannot have an empty content. So it may only work if you also define a mat-cell and/or a mat-header-cell inside this matColumnDef...
    – Random
    Commented Apr 1, 2021 at 13:52
  • This answer does not work any longer, the answer that worked for me is the one by Benjamin Freitag using the hidden attribute Commented May 3, 2023 at 8:42
6

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

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.