<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 ponent with * sign. Even [hidden] does not work.

<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 ponent with * sign. Even [hidden] does not work.

• javascript
• angular
• typescript
• angular-material
• angular-cdk

Share Improve this question Follow edited Mar 4, 2019 at 14:53 Kim Kern 60.6k2020 gold badges217217 silver badges214214 bronze badges asked Mar 4, 2019 at 14:49 ThejasThejas 4891010 silver badges3030 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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

ponent

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.

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.