In the morning, I have a question about working with data tables and API consumption. I need to hide a specific column in the table based on a variable value obtained during authentication. Can you suggest a method to achieve this?
Here is a snippet of my code:
The column I want to hide is labeled Com. Snmp https://i.stack.imgur.com/wCUu3.png
<div class="col-11 mx-auto">
<div class="search-div" >
<button class="btn btn-primary" (click)="onCreate()" [hidden]='permiso2'>Crear Equipo</button>
<!-- -->
<button class="btn btn-warning"(click)="onExport()">Descargar Datos</button>
<mat-form-field class="search-form-field">
<input matInput (keyup)="DoFilter($event.target.value)" placeholder="Filtrar">
</mat-form-field>
</div>
<!--Data Table-->
<div>
<table mat-table [dataSource]="dataSource" align="center" [hidden]="isLoading" >
<!-- Position Column -->
<ng-container matColumnDef="id_equipo">
<th mat-header-cell *matHeaderCellDef>ID Equipo</th>
<td mat-cell *matCellDef="let element">{{element.id_equipo}}</td>
</ng-container>
...
<ng-container matColumnDef="com_snmp">
<th mat-header-cell *matHeaderCellDef matTooltip="Comunidad SNMP de Lectura" matTooltipPosition="above">Com. SNMP</th>
<td mat-cell *matCellDef="let element">{{element.com_snmp}}</td>
</ng-container>
...
</table>
<mat-paginator [pageSizeOptions]="[5,10,20,50]" showFirstLastButtons [hidden]="isLoading"></mat-paginator>
</div>
<!--Spinner Para la Carga de Datos-->
<ng-container *ngIf="isLoading">
<mat-spinner class="spinner-container"></mat-spinner>
<br>
<p>Su data esta siendo cargada, por favor espere</p>
</ng-container>
</div>
<br>
My equipo.ts
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) => {
this.dataSource = new MatTableDataSource();
this.dataSource.data = res.sort((a, b) => a.vendedor.localeCompare(b.vendedor));
this.dataSource.paginator = this.paginator; // Paginando el DataSource
this.isLoading=false;
},
ngOnInit() {
this.RenderDataTable()
}