Hiding a mat data table column in angular 4

Question

<ng-container matColumnDef="jan">

<mat-header-cell [hidden]="true" *matHeaderCellDef  style="font-size: 65%" class="white-text" fxHide [fxShow.gt-md]="true">
  Jan
</mat-header-cell>
<mat-cell *matCellDef="let element" style="font-size: 65%"> <span> </span> </mat-cell>

I am trying to hide a column in angular 4 . I tried to use *ngIf , but it says we are not allowed to use more than one component with * sign. Even [hidden] does not work.

Answer 1

In your mat-header-row, you define the columnsToDisplay. You can use this field, to control which columns are shown:

component

columnsToDisplay = ['userName', 'age'];

template

<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>

For more details, see the docs.

This means that by changing your column list provided to the rows, you can easily re-order and include/exclude columns dynamically.

Answer 2

If you want to use [hidden] property for hiding HTML element when using Angular Material, its better to begin the tag with classic HTML tag.

In your case, use <th></th> instead of directly use <mat-header-cell></mat-header-cell>.

<ng-container matColumnDef="jan">
  <th
    mat-header-cell
    [hidden]="true"
    *matHeaderCellDef
    style="font-size: 65%"
    class="white-text"
    fxHide
    [fxShow.gt-md]="true"
  >
    Jan
  </th>
  <mat-cell *matCellDef="let element" style="font-size: 65%">
    <span> </span>
  </mat-cell>
</ng-container>

Working example is available on Stackblitz.