Angular ag-grid how to conditionally render header - ag-grid

Question

I am new to ag-grid with Angular. I have simple html table to list users. And i want to use ag-grid for this. There are few columns which shouldn't be displayed if there is no permission. I am not sure how to achieve this using ag-grid. Can anyone please help me how to achieve this?
Existing html table:
<table>
<thead>
<tr>
<th width="30"> </th>
<th>Name</th>
<ng-container *requireAnyPermission="[SensitiveAccessPermission]">
<th>Modified by</th>
<th>Modified date</th>
</ng-container>
<th *requireAnyPermission="[SensitiveAccessPermission]">Active</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let person of people">
<td> </td>
<td data-label="Name">{{ person.name }}</td>
<ng-container *requireAnyPermission="[SensitiveAccessPermission]">
<td data-label="Modified by">{{ person.modifiedBy }}</td>
<td data-label="Modified date">
{{ person.modified | dateTimeFormat }}
</td>
</ng-container>
<td *requireAnyPermission="[SensitiveAccessPermission]" data-label="Active">
<ng-container *ngIf="person.isActive; then checkTemplate"></ng-container>
</td>
</tr>
</tbody>
</table>
I have the ag-grid column definition as below:
const COLUMNS: ColDef[] = [
{ headerName: '', field: '' },
{ headerName: 'Name', field: 'name', filter: true },
{ headerName: 'Modified by', field: 'modifiedBy', filter: true },
{ headerName: 'Modified date', field: 'modified', filter: true },
{ headerName: 'Active', field: 'isActive', filter: true },
];
How to achieve the same with ag-grid.
*requireAnyPermission is custom directive
#Directive({
// tslint:disable-next-line: directive-selector
selector: '[requireAnyPermission]'
})
export class RequireAnyPermissionDirective implements OnDestroy {
private _onDestroy = new Subject();
private _reverse = false;
private _anyPermissions: Array<string | PermissionCodeWithMask>;
#Input() set requireAnyPermission(
permissions: Array<string | PermissionCodeWithMask>
) {
this._anyPermissions = permissions;
this.updateView();
}
#Input() set requireAnyPermissionReverse(reverse: boolean) {
this._reverse = reverse;
this.updateView();
}
constructor(
private templateRef: TemplateRef<HTMLElement>,
private viewContainerRef: ViewContainerRef,
private userService: UserService
) {}
ngOnDestroy(): void {
this._onDestroy.next();
}
private updateView() {
if (this._anyPermissions) {
this.userService
.userHasAnyPermissions(this._anyPermissions)
.pipe(takeUntil(this._onDestroy))
.subscribe((hasPermission) => {
this.viewContainerRef.clear();
if (
(hasPermission && !this._reverse) ||
(!hasPermission && this._reverse)
) {
this.viewContainerRef.createEmbeddedView(this.templateRef);
}
});
}
}
}
Thanks

Answer 1

You can do that by either constructing the column definitions array programmatically based on the permissions the user have OR remove the columns you want to hide from COLUMNS on component initialization
In both cases you would have to call
gridOptions.api.setColumnDefs(columnDefs);
after you are done
Look at updating column defs example here
You wanna do something similar.

Answer 2

You can show/hide columns:-
this.gridColumnApi.setColumnsVisible([...visibleCols], true); // show columns
this.gridColumnApi.setColumnsVisible([...hiddenCols], false); // hide columns
If you want those column, not available in the grid:-
when creating columnDefs for grid, dont add in columnDefs conditionally

Answer 3

In my opinion this is simple method (* For Big Project and multiple change)
First get all column list for grid like.
getKeys(obj: []) {
var keys = [];
for (var key in obj) {
keys.push(key);
}
return keys;
}
this getKeys method give you all ColumnName of over array
//item is json response from over server.
var columns = this.getKeys(item[0]);
var colObj = {};
var gridcolumnDefs = [];
for (var i = 0; i & lt; columns.length; i++) {
var visible = true;
switch (columns[i].toLocaleLowerCase()) {
case 'columnname1':
colObj = {
field: columns[i],
sortable: false
}
break;
case 'columnname2':
visible = false;
colObj = {
field: columns[i],
sortable: false
}
break;
default:
break;
}
if (visible) {
if (colObj != undefined)
this.gridcolumnDefs.push(colObj);
}
}
// set column grid
this.GridName.setColumnDefs(this.gridcolumnDefs)
please try and check.