I want to empty cells based on a value in another cell ag grid angular 7 - angular7

Question

I want to emty a cell based on the value in another cell. Both cells are custom rendered components
ie.
**comp1**
<div class="form-group input-group-sm">
<input
autocomplete="off"
class="form-control"
[(ngModel)]="value"
name="value"
type="number"
(ngModelChange)="updateMyData($event)"
[disabled]="disableDrpdwn()"
onkeypress="return (event.charCode >= 48 && event.charCode <= 57)"
onkeydown="return (event.keyCode!=13);"
(input)="onlyNumbers($event)"
/>
</div>
....
agInit(params: any): void {
this.params = params;
this.value = this.params.value;
}
disableDrpdwn() {
return this.params.data.amortizationPeriod === null || this.params.data.amortizationPeriod === 0;
}
updateMyData(data) {
this.params.data.amortizationPeriod = data;
if (this.params.data.amortizationPeriod === null || +this.params.data.amortizationPeriod === 0 ) {
this.params.data.amortizationMethod = null;
}
}
**comp2**
<div class="form-group input-group-sm dropdownSel">
<select #input [(ngModel)]="value" (ngModelChange)="updateMyData($event)" [disabled]= "disableDrpdwn()" class="form-control">
<option *ngFor="let item of dropdownnonInVal" [value]="item.name">{{ item.name}}</option>
</select>
</div>
....
agInit(params: any): void {
this.params = params;
this.value = this.params.value;
this.dropdownnonInVal = [{
name: 'Select',
value: ''
},
{
name: 'Yield Based',
value: 1
},
{
name: 'Price Based',
value: 2
}
];
}
updateMyData(data) {
this.params.data.amortizationMethod = data;
}
Here comp2 is dependent on comp1. So if I change the value of comp1's cell to 0, the value in the comp2's cell should be empty. i.e. the dropdown should get reset to blank on UI. How can I do it? Ngmodelchange is not doing any good. But the disable works properly. It the comp2 cell is disabled when the comp1 cell is 0 but the value is not getting blank. Need help.

Answer 1

I faced same issue in ag-grid. I guess there's no such functionality provided by AG Grid but obviously there's a workaround to it. You just need to empty the source (the cell you want to be emptied as in this.cellRenderer in image link) from which you're populating data in cellEditorParams (the cell you're changing values as in this.cellEditorParams in image link). Then put your logic in cellRenderer (the cell you want to be emptied as in this.cellRenderer in image link) as callback function.
image description here