Angular ag-Grid：如何刷新从父组件传递的自定义单元格渲染器中的参数值？

Question

I have my custom cell renderer for the editing menu:

To the renderer component I'm passing isEditing value, because when user click on Edit, then

agInit(params: ICellRendererParams) {
 this.params = params;
 this.data = params.data;
 this.isEditing = this.params.isEditing;
}

And in template:

<ng-container *ngIf="!isEditing">
HERE IS MENU ICON VIEW
</ng-container>
<div *ngIf="isEditing" class="d-flex justify-content-center align-items-center">
  <button type="button" class="btn btn-primary m-1" (click)="onSave()">{{'shared.save' | translate}} 
  </button>
  <button type="button" class="btn btn-secondary m-1" (click)="onCancel()">{{'shared.cancel' | translate}}</button>
</div>

In my parent component where is the grid I have my column definition:

  headerName: '',
  cellRendererFramework: EditRendererComponent,
  cellRendererParams: {
    isEditing: this.isEditing
  }

The problem is I want to manage isEditing flag from the parent level. But when I start row edition onClick then (rowEditingStarted) is triggered and I'm changing the flag:

{
this.isEditing = true;
this.gridApi.refreshCells({force: true});
}

As you can see, I tried to use refreshingCells method from gridApi but it doesn't help me. Maybe on of you have some idea to handle this?

Answer 1

I tried using a similar method to what you implemented but could not get it to work. The value was not changing. Instead... I used a service which I subscribe to in the custom renderer. In the parent component I have a button which toggles the "isEditing" variable and updates the value in the observable.

Parent Component

this._TableRendererService.updateIsEdit(this.isEdit);

   

Custom Renderer

  agInit(params: any) {
    this.params = params;
    this._TableRendererService.currentIsEdit.subscribe(isEdit => this.isEdit = isEdit);
  }

Answer 2

make cell params value is a function like this:

  cellRendererParams: {
    isEditing: () => this.isEditing
  }

and use it as a function:

 <div *ngIf="isEditing()"></div>