CODEWITHSUNDEEP
javascriptangulartypescriptangular-materialangular-cdk
Thejas
Thejas

Reputation: 489

Hiding a mat data table column in angular 4

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

Upvotes: 2

Views: 9215

Answers (2)

Welly 林經緯
Welly 林經緯

Reputation: 86

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.

Upvotes: 3

Kim Kern
Kim Kern

Reputation: 60377

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.

Upvotes: 3

Related Questions