Hide Angular material 2 table, specific header and its column

Question

I just tried to hide an Angular material 2 table statusid header and column like following.

        <mat-table class="mat-elevation-z1" #table [dataSource]="dataSourceHE">
            <ng-container hidden="hidden" cdkColumnDef="statusid">
                <mat-header-cell hidden="hidden"> Id </mat-header-cell>
                <mat-cell hidden="hidden"> {{row.statusid}} </mat-cell>
            </ng-container>
         </mat-table>

but this is not working properly. if this possible, how can I do this ?

Answer 1

You simply need to change Column Map in component. Adding or removing any key inside it causes the table to show or hide the corresponding column.

Don't try to use CSS or HTML solutions like using hidden attribute or display: none; CSS rule, they turn the code into a dirty and fallible one.