title: Hide a specific column if a variable is true in material angular data table
body: <p>Good morning I have the following question, I have a data table which I get the data that is in it by consuming api rest, the question is that I want to hide a specific column of the same table depending on the value of a variable where its value will be collected in the authentication to enter the application, but I would like to know what method there is to hide a column in a data table depending on the condition of a variable.</p>
  
  <p>My code </p>
  
  <p>The column to hide is the <strong>Com. Snmp</strong>
  <a href="https://i.stack.imgur.com/wCUu3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wCUu3.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;div class="col-11 mx-auto"&gt;
  
          &lt;div class="search-div" &gt;
                &lt;button  class="btn btn-primary"  (click)="onCreate()" [hidden]='permiso2'&gt;Crear Equipo&lt;/button&gt;&amp;nbsp;&amp;nbsp; 
                &lt;!-- --&gt;
                &lt;button class="btn btn-warning"(click)="onExport()"&gt;Descargar Datos&lt;/button&gt;&amp;nbsp;&amp;nbsp; 
              &lt;mat-form-field class="search-form-field"&gt;
                  &lt;input matInput (keyup)="DoFilter($event.target.value)" placeholder="Filtrar"&gt;
              &lt;/mat-form-field&gt;
          &lt;/div&gt;
                                                      &lt;!--Data Table--&gt;
            &lt;div&gt;  
                &lt;table mat-table [dataSource]="dataSource" align="center" [hidden]="isLoading" &gt;  
  
                    &lt;!-- Position Column --&gt;
                    &lt;ng-container matColumnDef="id_equipo"&gt;
                      &lt;th mat-header-cell *matHeaderCellDef&gt;ID Equipo&lt;/th&gt;
                      &lt;td mat-cell *matCellDef="let element"&gt;{{element.id_equipo}}&lt;/td&gt;
                    &lt;/ng-container&gt;
  
                    &lt;!-- Name Column --&gt;
                    &lt;ng-container matColumnDef="nombre"&gt;
                      &lt;th mat-header-cell *matHeaderCellDef&gt;Nombre Equipo&lt;/th&gt;
                      &lt;td mat-cell *matCellDef="let element" &gt;{{element.nombre}}&lt;/td&gt;
                    &lt;/ng-container&gt;
  
                    &lt;!-- Weight Column --&gt;
                    &lt;ng-container matColumnDef="vendedor"&gt;
                      &lt;th mat-header-cell *matHeaderCellDef&gt;Vendedor&lt;/th&gt;
                      &lt;td mat-cell *matCellDef="let element"&gt;{{element.vendedor}}&lt;/td&gt;
                    &lt;/ng-container&gt;
  
                    &lt;!-- Symbol Column --&gt;
                    &lt;ng-container matColumnDef="ip_gestion"&gt;
                      &lt;th mat-header-cell *matHeaderCellDef&gt;IP Gestión&lt;/th&gt;
                      &lt;td mat-cell *matCellDef="let element"&gt;{{element.ip_gestion}}&lt;/td&gt;
                    &lt;/ng-container&gt;
  
                    &lt;ng-container matColumnDef="tipo"&gt;
                      &lt;th mat-header-cell *matHeaderCellDef&gt;Tipo&lt;/th&gt;
                      &lt;td mat-cell *matCellDef="let element"&gt;{{element.tipo}} &lt;/td&gt;
                    &lt;/ng-container&gt;
  
                    &lt;ng-container matColumnDef="localidad"&gt;
                      &lt;th mat-header-cell *matHeaderCellDef&gt;Localidad&lt;/th&gt;
                      &lt;td mat-cell *matCellDef="let element"&gt;{{element.localidad}}&lt;/td&gt;
                    &lt;/ng-container&gt;
  
                    &lt;!-- &lt;tr mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/tr&gt;
                    &lt;tr mat-row *matRowDef="let element; columns: displayedColumns;"&gt;&lt;/tr&gt; --&gt;
  
                    &lt;ng-container matColumnDef="categoria"&gt;
                      &lt;th mat-header-cell *matHeaderCellDef&gt;Categoria&lt;/th&gt;
                      &lt;td mat-cell *matCellDef="let element"&gt;{{element.categoria}}&lt;/td&gt;
                    &lt;/ng-container&gt;
  
                     &lt;ng-container matColumnDef="com_snmp"&gt;
                        &lt;th mat-header-cell *matHeaderCellDef matTooltip="Comunidad SNMP de Lectura" matTooltipPosition="above"&gt;Com. SNMP&lt;/th&gt;
                        &lt;td mat-cell *matCellDef="let element"&gt;{{element.com_snmp}}&lt;/td&gt;
                      &lt;/ng-container&gt;
  
                    &lt;ng-container matColumnDef="ultima_actualizacion"&gt;
                      &lt;th mat-header-cell *matHeaderCellDef&gt;Ultima Actualización &lt;/th&gt;
                      &lt;td mat-cell *matCellDef="let element"&gt;{{element.ultima_actualizacion | date:'d/M/yyyy, h:mm a'}}&lt;/td&gt;
                    &lt;/ng-container&gt;
  
                    &lt;ng-container matColumnDef="actions"&gt;
                      &lt;th mat-header-cell *matHeaderCellDef&gt;Acciones&lt;/th&gt;
                      &lt;td mat-cell *matCellDef="let element"&gt;
                      &lt;fa-icon [icon]=icon_edit class="btn btn-success" (click)=onEdit(element) matTooltip="Editar" matTooltipPosition="left" [hidden]='permiso2'&gt;&lt;/fa-icon&gt;&amp;nbsp;
                      &lt;!-- --&gt;
                      &lt;fa-icon [icon]=icon_delete class="btn btn-danger" (click)=onDelete(element) matTooltip="Eliminar" matTooltipPosition="right" [hidden]='!delete_permiso'&gt;&lt;/fa-icon&gt;
  
                      &lt;/td&gt;
                    &lt;/ng-container&gt;
  
                    &lt;tr mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/tr&gt;
                    &lt;tr mat-row *matRowDef="let element; columns: displayedColumns;"&gt;&lt;/tr&gt;
  
                &lt;/table&gt;        
                    &lt;mat-paginator [pageSizeOptions]="[5,10,20,50]" showFirstLastButtons [hidden]="isLoading"&gt;&lt;/mat-paginator&gt;          
            &lt;/div&gt;
  
                                                  &lt;!--Spinner Para la Carga de Datos--&gt;
                  &lt;ng-container *ngIf="isLoading"&gt;
                    &lt;mat-spinner class="spinner-container"&gt;&lt;/mat-spinner&gt;
                    &lt;br&gt;
                    &lt;p&gt;Su data esta siendo cargada, por favor espere&lt;/p&gt;
                  &lt;/ng-container&gt;           
    &lt;/div&gt;
  &lt;br&gt;
  </code></pre>
  
  <p>My equipo.ts </p>
  
  <pre><code>displayedColumns: string[] = ['id_equipo', 'nombre', 'vendedor', 'ip_gestion','tipo','localidad','categoria','com_snmp','ultima_actualizacion','actions',]; // Arreglo con los nombres de las columnas a mostrar por el DataTable
              dataSource:any;
  
  
  RenderDataTable() {
                  this.isLoading=true;
                  this.PrtgService.getAllElements(this.table).subscribe(  
                    (res) =&gt; {  
                        this.dataSource = new MatTableDataSource();
                        this.dataSource.data = res.sort((a, b) =&gt; a.vendedor.localeCompare(b.vendedor));
                        this.dataSource.paginator = this.paginator; // Paginando el DataSource
                        this.isLoading=false;   
  
                  },
  ngOnInit() {
              this.RenderDataTable()
                                     }
  </code></pre>