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 ?

score 6 · Answer 1 · answered Dec 01 '18 at 19:32

6

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.

answered Dec 01 '18 at 19:32

Amirhossein Mehrvarzi

18,024
7
45
70

I believe this answer should've been selected. Works great. – java-addict301 Jun 21 '19 at 19:42

score 0 · Answer 2 · edited Nov 11 '17 at 15:05

The solution is to create an attribute directive, through this directive we can set the display property of an element.

showcolumn.directive.ts:

import {Component, Directive, ElementRef, Input, AfterViewInit} from '@angular/core';
@Directive({ 
     selector: '[showColumn]' 
})
export class ShowColumnDirective implements AfterViewInit{
    @Input() showInput: string;
    constructor(private elRef: ElementRef) { 
    }
    ngAfterViewInit(): void {
    this.elRef.nativeElement.style.display = this.showInput;
    }
}

Declare this directive in your app's module or any other module:

import {ShowColumnDirective} from './showcolumn.directive';
@NgModule({
  declarations: [ShowColumnDirective]
})
export class AppModule {}

Now we can use the directive inside our table's html Component:

<ng-container matColumnDef="position">
  <mat-header-cell showColumn showInput="none" *matHeaderCellDef> No. </mat-header-cell>
  <mat-cell showColumn showInput="none" *matCellDef="let element"> {{element.position}} </mat-cell>
</ng-container>

Here's a demo: https://plnkr.co/edit/Woyrb9Yx8b9KU3hv4RsZ?p=preview

This is overcomplicated - you can even do this: Id – Trujllo Mar 14 '18 at 17:21 — Trujllo, Mar 14 '18 at 17:21

score 0 · Answer 3 · answered Jun 14 '21 at 16:02

0

Just remove the header row. For example, just one column 'title'

<ng-container matColumnDef="title">
   <td *matCellDef="let item" mat-cell>{{item}}</td>
</ng-container> 
<tr matRowDef="let row;columns: ['title'];" mat-row></tr>

answered Jun 14 '21 at 16:02

Bigeyes

1,508
2
23
42

Adjamir de Moura Galvão · Answer 4 · 2023-02-16T15:35:31.040

If you get here for angular answer. There it is. Put this code: In html (adapt to your code):

<mat-header-row *matHeaderRowDef="getDisplayedColumns()"></mat-header-row>
<mat-row *matRowDef="let row; columns: getDisplayedColumns()"></mat-row>
<mat-footer-row *matFooterRowDef="getDisplayedColumns()"></mat-footer-row>

In the .ts Make your class implements OnInit e OnDestroy

Declare these methods

 isPortrait() {
    return !this.landscape.matches;
  }  
  handlerOrientation: any;

landscape = window.matchMedia("(orientation: landscape)");

  ngOnDestroy(): void {
    console.log('on destroy');
    //https://stackoverflow.com/questions/46906763/how-to-remove-eventlisteners-in-angular-4
    //https://code.daypilot.org/79036/angular-calendar-detect-orientation-change-landscape-portrait
    this.landscape.removeEventListener("change", this.handlerOrientation, true);
  }

  private onChangeOrientation() {
    console.log('landscape orientation');
  }

 landscape = window.matchMedia("(orientation: landscape)");

//https://stackoverflow.com/questions/47077302/angular2-material-table-hide-column
//https://stackoverflow.com/questions/41432533/how-to-detect-if-device-is-desktop-and-or-mobile-and-if-connection-is-wifi-or-n
   getDisplayedColumns() : string[] {
            let exibir = !this.isPortrait();
            return this.displayedColumns.filter(cd => exibir || cd.showMobile).map(cd => cd.def);}

Declare the columns this way

  displayedColumns = [{ def: 'data', showMobile: true}, { def: 'numero', showMobile: false}];

}

In OnInit put this

this.handlerOrientation = this.onChangeOrientation.bind(this);
this.landscape.addEventListener("change", this.handlerOrientation, true);

Hide Angular material 2 table, specific header and its column

4 Answers4