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

Call the service directly from within the cellRenderer component
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?

See How to Ask, and especially minimal reproducible example. The idea is you describe what you want to do, show what you tried, and tell us what results you get. Reproduce your issue on plunk or stackblitz so that others can help you easily. — Paritosh
I'd love to give an example but I'm not sure how much it would help since it's just some basic AGGrid cellRendering components. Added it anyways — Vedant Shetty
Instead of passing observable as params, try passing it's value after getting it inside subscription. Initialize gridOptions inside subscription part of getUserRole — Paritosh
gridOptions needs to be initialised as soon as the component is created. This is because it is used by ag-grid and once initialised I’m unable to dynamically change the gridOptions properties. — Vedant Shetty
that is correct, so delay initializing your ag-grid till you get it. ex. <ag-grid-angular *ngIf="gridOptions" gridOptions="gridOptions"....></ag-grid-angular> — Paritosh

Matt Nienow Matt Nienow · Accepted Answer · 2021-02-09T15:51:46

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

Observable In AgGrid:CellRenderer

1 Answers