Event listener works outside of the grid but doesn

Question

I have been struggling with making a simple listener work inside of a cell in ag-grid. What's bothering me is that it works perfectly if I place it in the html file. In app.component.html:

<select class="form-control"  (change)="
RefreshRisqueBrutColumn();"
>
    <br>
    <option>1- Très improbable</option>
    <option>2- Peu probable</option>
    <option>3- Possible</option>
    <option>4- Probable</option>
</select> 

In app.component.ts, I have the listener definition:

  public RefreshRisqueBrutColumn() {
    const params = { force: true };
    this.gridApi.refreshCells(params);
    console.log('LISTENER WORKS')
  } 

So in the browser, when I select an option:
I have this in the console:
Now, I have taken exactly the same select code and I have written it inside the custom cell renderer:

{
          headerName: "Probabilité",
          headerToolName: "Consultez les échelles",
          field: "pbt",
          editable: true,
          cellRenderer: params => {
            return `
            <hr>
            <select class="form-control"  (change)="
            RefreshRisqueBrutColumn();"
            >
                <br>
                <option>1- Très improbable</option>
                <option>2- Peu probable</option>
                <option>3- Possible</option>
                <option>4- Probable</option>
  </select>
  <hr>
            `;
          }
        }  

So here's the column in the browser:

So when I select an option, the same thing should happen, right?
However, nothing shows-up in the console.
So I am really curious why isn't this working?
And if possible, how can I fix it?

Answer 1

The cellRenderer expects plain string to be rendered for HTML. The string you are providing in your ColDef is actually an Angular template - which should be compiled into plain HTML. (observe (change)="RefreshRisqueBrutColumn())

Create custom CellRendererComponent, provide the template, define change handler within it and all will work fine.

Reference: Angular Cell Render Components

Answer 2

I have fixed this thanks @Paritosh's tip.
To save you some time, here's how I did it:
This is the custom cell renderer definition:

drop-down-cell-renderer.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-drop-down-cell-renderer',
  templateUrl: './drop-down-cell-renderer.component.html',
  styleUrls: ['./drop-down-cell-renderer.component.css']
})
export class DropDownCellRendererComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
 params: any;

  agInit(params: any): void {
    this.params = params;
  }

  public RefreshRisqueBrutColumn() {
    console.log('LISTENER WORKS')
  }
}

drop-down-cell-renderer.component.html

<select class="form-control"  (change)=" RefreshRisqueBrutColumn();">
    <br>
    <option>1- Très improbable</option>
    <option>2- Peu probable</option>
    <option>3- Possible</option>
    <option>4- Probable</option>
</select>

app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

import {AppComponent} from './app.component';
import {AgGridModule} from 'ag-grid-angular';
import { DropDownCellRendererComponent } from './drop-down-cell-renderer/drop-down-cell-renderer.component';

@NgModule({
  declarations: [
    AppComponent,
    DropDownCellRendererComponent
  ],
  imports: [
    BrowserModule,
    AgGridModule.withComponents([DropDownCellRendererComponent])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

app.component.ts

import {Component, OnInit} from '@angular/core';
import {NumberFormatterComponent} from './number-formatter.component';
import {NumericEditorComponent} from './numeric-editor.component';
import {RangeFilterComponent} from './range-filter.component';
import { DropDownCellRendererComponent } from './drop-down-cell-renderer/drop-down-cell-renderer.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  columnDefs = [
    {
          headerName: "Probabilité",
          headerToolName: "Consultez les échelles",
          field: "pbt",
          editable: true,
          cellRenderer: 'dropDownCellRendererComponent'
        }
  ];

  rowData = [{}];

  frameworkComponents = {

    dropDownCellRendererComponent: DropDownCellRendererComponent
  };

  ngOnInit() {

  }
}

And here's the result:
Hope this helps someone :)