Observable In AgGrid:CellRenderer

Question

I'm trying to add some data from my backend to the AGGrid cell renderer component but it is not reading the observable data

Here's what I've tried so far

1. Call the service directly from within the cellRenderer component
2. Call the service in the data grid and pass the value as a cellRendererParams

// My Grid Options
gridOptions: {
  columnTypes: {
    "actionColumn": {
     cellRenderer: 'actionColumnRenderer',
     cellRendererParams: {
        canEdit$: this.userInfo.getUserRole() // Returns a Observable<boolean>
     }
  }
}

//Inside ActionColumnRenderer
  <div *ngIf="(canEdit$|async)></div>

// Calling in the service in the actionRenderer directly
agInit(params:any){
  this.params = params;
  this.canEdit$ = this.userInfo.getUserRole();
}

There's nothing wrong with the observable as I am able to access it in all my other components(even inside the data grid component)

Any ideas?

Answer 1

When you want to use Angular inside of a cell renderer, you should set the cellRendererFramework property, not the cellRenderer property. For example:

customColumn: {
  cellRendererFramework: MyCellComponent
}

Then you will be able to use your service inside the cell component, and the observable will work. See this simple example of an angular cell renderer component that uses an observable: https://stackblitz.com/edit/angular-ag-grid-cell-renderer

Documentation: https://www.ag-grid.com/documentation/angular/components/#registering-framework-components