title: How to refresh an ag-grid when a change occurs inside a custom Cell Renderer component?
body: <p>Inside my grid, I have this column:<br />
  <a href="https://i.stack.imgur.com/eht2V.png" rel="noreferrer"><img src="https://i.stack.imgur.com/eht2V.png" alt="enter image description here" /></a></p>
  <pre><code>  {
        headerName: &quot;Generic/Specific&quot;,
        field: &quot;genericspecific&quot;,
        id: &quot;6&quot;,
        cellRenderer:'genericSpecificCellRenderersComponent',
        cellStyle: params =&gt; {
          const colors: string[] = [&quot;red&quot;, &quot;orange&quot;];
          const genericSpecific: string[] = [&quot;Generic&quot;, &quot;Specific&quot;];
          return {
            &quot;background-color&quot;: colors[genericSpecific.indexOf(this.selectedOptions[params.node.id])]
          };
        }
      }
  </code></pre>
  <p>As you can see, it has a custom Cell Renderer. Here's its definition:</p>
  <pre><code> @Component({
    selector: &quot;app-generic-specific-renderers&quot;,
    template: `
      &lt;hr /&gt;
      &lt;select class=&quot;form-control&quot; id='0' (change)=&quot;updateChosenValue($event.target); refresh(params)&quot;&gt;
        &lt;option &gt;{{ selectedOptions[params.node.id] }}&lt;/option&gt;
        &lt;option &gt;Specific&lt;/option&gt;
        &lt;option &gt;Generic&lt;/option&gt;
      &lt;/select&gt;
      &lt;hr /&gt;
    `
  })
  export class GenericSpecificCellRenderersComponent implements OnInit {
    updateChosenValue(event) {
      if (event.value==='Specific'){
        this.selectedOptions[this.params.node.id]='Specific'
      }
      else if (event.value==='Generic'){
        this.selectedOptions[this.params.node.id]='Generic'
       }
      }
    selectedOptions:string[]=[];
    constructor(private controlAssessmentData: ControlAssessmentService) {
      this.controlAssessmentData.currentSelectedOptions.subscribe(
        receivedSelectedOptions =&gt;
          (this.selectedOptions = receivedSelectedOptions)
      );
    }
    ngOnInit() {}
    public params: any;
    public gridApi:any;
  
    // called on init
    agInit(params: any): void {
      this.params = params;
      this.gridApi= params.api;
    }
    // called when the cell is refreshed
    refresh(params: any): boolean {
      this.params = params;
      this.gridApi.refreshCells()
      console.log('this.params: ', this.params);
      return true;
    }
  }
  </code></pre>
  <p>I wanted to refresh the grid everytime the user chooses an option from the dropDown list.<br />
  I thought my code should work, because I used the same logic when refreshing the grid where it was defined.<br />
  However, it didn't.<br />
  Any idea why?  And maybe how I can solve it?<br />
  Thank you!</p>