Angular2 material table hide column

To conditionally hide a column in an Angular Material table, you can use ngIf in the column definition within the table template. Here's a step-by-step guide on how to achieve this:

1. Setup Angular Material Table

Ensure you have Angular Material set up in your project. If not, you can follow the official guide to install and set it up: Angular Material Getting Started.

2. Define the Table Columns in the Component

In your component, define the columns you want to display. You can use a variable to control the visibility of each column.

import { Component } from '@angular/core'; @Component({ selector: 'app-example', templateUrl: './example.component.html', styleUrls: ['./example.component.css'] }) export class ExampleComponent { displayedColumns: string[] = ['name', 'age', 'address']; dataSource = ELEMENT_DATA; // Control visibility of columns showAgeColumn = true; } const ELEMENT_DATA: PeriodicElement[] = [ {name: 'Hydrogen', age: 1.0079, address: 'H'}, {name: 'Helium', age: 4.0026, address: 'He'}, {name: 'Lithium', age: 6.941, address: 'Li'}, {name: 'Beryllium', age: 9.0122, address: 'Be'}, {name: 'Boron', age: 10.811, address: 'B'}, ]; 

3. Define the Table in the Template

In your component template, use ngIf to conditionally include the column definition and the table cells.

<table mat-table [dataSource]="dataSource"> <!-- Name Column --> <ng-container matColumnDef="name"> <th mat-header-cell *matHeaderCellDef> Name </th> <td mat-cell *matCellDef="let element"> {{element.name}} </td> </ng-container> <!-- Age Column (conditionally hidden) --> <ng-container *ngIf="showAgeColumn" matColumnDef="age"> <th mat-header-cell *matHeaderCellDef> Age </th> <td mat-cell *matCellDef="let element"> {{element.age}} </td> </ng-container> <!-- Address Column --> <ng-container matColumnDef="address"> <th mat-header-cell *matHeaderCellDef> Address </th> <td mat-cell *matCellDef="let element"> {{element.address}} </td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table> 

4. Adjust the Displayed Columns Dynamically

When you hide or show a column, you need to update the displayedColumns array accordingly.

import { Component } from '@angular/core'; @Component({ selector: 'app-example', templateUrl: './example.component.html', styleUrls: ['./example.component.css'] }) export class ExampleComponent { dataSource = ELEMENT_DATA; showAgeColumn = true; displayedColumns: string[] = this.showAgeColumn ? ['name', 'age', 'address'] : ['name', 'address']; toggleAgeColumn() { this.showAgeColumn = !this.showAgeColumn; this.displayedColumns = this.showAgeColumn ? ['name', 'age', 'address'] : ['name', 'address']; } } const ELEMENT_DATA: PeriodicElement[] = [ {name: 'Hydrogen', age: 1.0079, address: 'H'}, {name: 'Helium', age: 4.0026, address: 'He'}, {name: 'Lithium', age: 6.941, address: 'Li'}, {name: 'Beryllium', age: 9.0122, address: 'Be'}, {name: 'Boron', age: 10.811, address: 'B'}, ]; 

5. Add a Button to Toggle the Column Visibility

In your template, you can add a button to toggle the visibility of the column.

<button (click)="toggleAgeColumn()">Toggle Age Column</button> <table mat-table [dataSource]="dataSource"> <!-- Name Column --> <ng-container matColumnDef="name"> <th mat-header-cell *matHeaderCellDef> Name </th> <td mat-cell *matCellDef="let element"> {{element.name}} </td> </ng-container> <!-- Age Column (conditionally hidden) --> <ng-container *ngIf="showAgeColumn" matColumnDef="age"> <th mat-header-cell *matHeaderCellDef> Age </th> <td mat-cell *matCellDef="let element"> {{element.age}} </td> </ng-container> <!-- Address Column --> <ng-container matColumnDef="address"> <th mat-header-cell *matHeaderCellDef> Address </th> <td mat-cell *matCellDef="let element"> {{element.address}} </td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table> 

This setup allows you to dynamically hide and show the "Age" column in your Angular Material table.

Examples

1. How to hide a column in Angular Material Table conditionally

   • Description: Hides a column based on a condition (e.g., user role) using Angular Material's data table.
   • Code:

     <table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> <ng-container matColumnDef="id" *ngIf="showIdColumn"> <th mat-header-cell *matHeaderCellDef> ID </th> <td mat-cell *matCellDef="let element"> {{element.id}} </td> </ng-container> <ng-container matColumnDef="name"> <th mat-header-cell *matHeaderCellDef> Name </th> <td mat-cell *matCellDef="let element"> {{element.name}} </td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table> 

     • Explanation: Use *ngIf to conditionally include or exclude columns based on a variable like showIdColumn.

2. How to hide a column in Angular Material Table with CSS

   • Description: Hides a column using CSS to set its display to none.
   • Code:

     <table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> <ng-container matColumnDef="id"> <th mat-header-cell *matHeaderCellDef class="hide-column"> ID </th> <td mat-cell *matCellDef="let element" class="hide-column"> {{element.id}} </td> </ng-container> <ng-container matColumnDef="name"> <th mat-header-cell *matHeaderCellDef> Name </th> <td mat-cell *matCellDef="let element"> {{element.name}} </td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table> <style> .hide-column { display: none; } </style> 

     • Explanation: Use CSS to hide columns by setting their display property to none.

3. How to dynamically hide/show columns in Angular Material Table

   • Description: Dynamically hide or show columns based on user interactions or application state.
   • Code:

     <button (click)="toggleColumn('id')">Toggle ID Column</button> <table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> <ng-container matColumnDef="id" *ngIf="displayedColumns.includes('id')"> <th mat-header-cell *matHeaderCellDef> ID </th> <td mat-cell *matCellDef="let element"> {{element.id}} </td> </ng-container> <ng-container matColumnDef="name"> <th mat-header-cell *matHeaderCellDef> Name </th> <td mat-cell *matCellDef="let element"> {{element.name}} </td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table> <script> export class YourComponent { displayedColumns: string[] = ['name']; toggleColumn(column: string) { if (this.displayedColumns.includes(column)) { this.displayedColumns = this.displayedColumns.filter(col => col !== column); } else { this.displayedColumns.push(column); } } } </script> 

     • Explanation: Use a function to toggle column visibility in the displayedColumns array.

4. How to hide a column in Angular Material Table using ngClass

   • Description: Hide or show a column dynamically using Angular��s ngClass.
   • Code:

     <table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> <ng-container matColumnDef="id"> <th mat-header-cell *matHeaderCellDef [ngClass]="{'hidden-column': hideIdColumn}"> ID </th> <td mat-cell *matCellDef="let element" [ngClass]="{'hidden-column': hideIdColumn}"> {{element.id}} </td> </ng-container> <ng-container matColumnDef="name"> <th mat-header-cell *matHeaderCellDef> Name </th> <td mat-cell *matCellDef="let element"> {{element.name}} </td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table> <style> .hidden-column { display: none; } </style> 

     • Explanation: Use ngClass to conditionally apply the hidden-column class to hide columns.

5. How to programmatically hide columns in Angular Material Table

   • Description: Programmatically hide columns by manipulating the displayedColumns array.
   • Code:

     <button (click)="hideColumn('id')">Hide ID Column</button> <table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> <ng-container matColumnDef="id"> <th mat-header-cell *matHeaderCellDef> ID </th> <td mat-cell *matCellDef="let element"> {{element.id}} </td> </ng-container> <ng-container matColumnDef="name"> <th mat-header-cell *matHeaderCellDef> Name </th> <td mat-cell *matCellDef="let element"> {{element.name}} </td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table> <script> export class YourComponent { displayedColumns: string[] = ['id', 'name']; hideColumn(column: string) { this.displayedColumns = this.displayedColumns.filter(col => col !== column); } } </script> 

     • Explanation: Modify the displayedColumns array to hide specific columns.

6. How to hide columns in Angular Material Table based on user role

   • Description: Hide columns based on user roles or permissions.
   • Code:

     <table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> <ng-container matColumnDef="id" *ngIf="userRole === 'admin'"> <th mat-header-cell *matHeaderCellDef> ID </th> <td mat-cell *matCellDef="let element"> {{element.id}} </td> </ng-container> <ng-container matColumnDef="name"> <th mat-header-cell *matHeaderCellDef> Name </th> <td mat-cell *matCellDef="let element"> {{element.name}} </td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table> <script> export class YourComponent { userRole = 'admin'; // or 'user' displayedColumns: string[] = ['id', 'name']; } </script> 

     • Explanation: Use a variable like userRole to conditionally include columns.

7. How to hide columns using Angular Material Table with Angular pipes

   • Description: Use Angular pipes to hide columns based on dynamic conditions.
   • Code:

     <table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> <ng-container matColumnDef="id"> <th mat-header-cell *matHeaderCellDef> ID </th> <td mat-cell *matCellDef="let element" [ngClass]="{'hide': !showId}"> {{element.id}} </td> </ng-container> <ng-container matColumnDef="name"> <th mat-header-cell *matHeaderCellDef> Name </th> <td mat-cell *matCellDef="let element"> {{element.name}} </td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table> <style> .hide { display: none; } </style> 

     • Explanation: Use Angular pipes to conditionally apply the hide class to columns.

8. How to hide a column in Angular Material Table using a custom directive

   • Description: Create a custom directive to hide columns in the Angular Material table.
   • Code:

     // hide-column.directive.ts import { Directive, ElementRef, Input, Renderer2 } from '@angular/core'; @Directive({ selector: '[appHideColumn]' }) export class HideColumnDirective { @Input() set appHideColumn(condition: boolean) { if (condition) { this.renderer.setStyle(this.el.nativeElement, 'display', 'none'); } else { this.renderer.removeStyle(this.el.nativeElement, 'display'); } } constructor(private el: ElementRef, private renderer: Renderer2) {} } // Usage in template <th mat-header-cell *matHeaderCellDef appHideColumn="hideId"> ID </th> <td mat-cell *matCellDef="let element" appHideColumn="hideId"> {{element.id}} </td> 

     • Explanation: Use a custom directive to conditionally hide columns based on an input value.

9. How to dynamically set displayed columns in Angular Material Table

   • Description: Dynamically manage which columns are displayed in the table.
   • Code:

     <table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> <ng-container matColumnDef="id"> <th mat-header-cell *matHeaderCellDef> ID </th> <td mat-cell *matCellDef="let element"> {{element.id}} </td> </ng-container> <ng-container matColumnDef="name"> <th mat-header-cell *matHeaderCellDef> Name </th> <td mat-cell *matCellDef="let element"> {{element.name}} </td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table> <script> export class YourComponent { allColumns = ['id', 'name']; displayedColumns: string[] = this.allColumns; toggleColumn(column: string) { const index = this.displayedColumns.indexOf(column); if (index === -1) { this.displayedColumns.push(column); } else { this.displayedColumns.splice(index, 1); } } } </script> 

     • Explanation: Manage column visibility dynamically by modifying the displayedColumns array.

10. How to hide Angular Material Table columns based on user settings

    • Description: Hide columns based on user preferences or settings stored in a service or local storage.
    • Code:

      <table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> <ng-container matColumnDef="id" *ngIf="userSettings.showIdColumn"> <th mat-header-cell *matHeaderCellDef> ID </th> <td mat-cell *matCellDef="let element"> {{element.id}} </td> </ng-container> <ng-container matColumnDef="name"> <th mat-header-cell *matHeaderCellDef> Name </th> <td mat-cell *matCellDef="let element"> {{element.name}} </td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table> <script> export class YourComponent { userSettings = { showIdColumn: true }; displayedColumns: string[] = ['id', 'name']; } </script> 

      • Explanation: Use user settings to conditionally include columns in the Angular Material table.

---

More Tags

driver httponly entity-framework cqrs ibm-watson tokenize sensors laravel-jobs package haversine

More Programming Questions

• Google authentication and Fetching mails from scratch in Django
• Named List in R
• C# LongLength property of an Array
• The linspace Method in Numpy
• Linux dd Command: Data Backup with Format Conversion During Backup
• MySQL AVG Function: Find The Average
• const Object in C++
• Java Classes And Objects
• Entity Framework DateTime and UTC
• String Interpolation in Visual Studio and IFormatProvider (CA1305)

More Fitness-Health Calculators

• Free Online Healthy Weight Calculator
• Free Online Blood Alcohol Concentration (BAC) Calculator
• Free Online Lean Body Mass Calculator
• Free Online Calories Burned Calculator
• Free Online Macro Calculator

More Trees & Forestry Calculators

• Free Online Basal Area Calculator
• Free Online Tree Spacing Calculator
• Free Online Tree Height Calculator
• Free Online Tree Leaves Calculator
• Free Online Tree Age Calculator

More Fitness Calculators

• Free Online BMR Calculator
• Free Online Calories Burned Calculator
• Free Online Pace Calculator
• Free Online Ideal Weight Calculator
• Free Online Body Fat Calculator

More Mixtures and solutions Calculators

• Free Online TDS Calculator
• Free Online Buffer pH Calculator
• Free Online Percent Solution Calculator
• Free Online Activity Coefficient Calculator
• Free Online Saponification Value Calculator