title: Event listener isn't working with the custom cell renderer in ag-grid Angular
body: <p>I have set-up a simple column definition:  </p>
  
  <pre><code>{
            headerName: "Probabilité",
            headerToolName: "Consultez les échelles",
            field: "pbt",
            editable: true,
            cellRenderer: params =&gt; {
              return `
              &lt;hr&gt;
              &lt;select class="form-control"  (change)="UpdateRisqueBrut($event.target);"
              &gt;
                  &lt;br&gt;
                  &lt;option&gt;1- Très improbable&lt;/option&gt;
                  &lt;option&gt;2- Peu probable&lt;/option&gt;
                  &lt;option&gt;3- Possible&lt;/option&gt;
                  &lt;option&gt;4- Probable&lt;/option&gt;
    &lt;/select&gt;
    &lt;hr&gt;
              `;
            }
          } 
  </code></pre>
  
  <p>Which renders this way:<br>
  <a href="https://i.stack.imgur.com/dY4MJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dY4MJ.png" alt="enter image description here"></a><br>
  As you may have noticed, I have set-up a listener in the custom cell render called that logs the option chosen among the typescript list. </p>
  
  <blockquote>
    <p>UpdateRisqueBrut</p>
  </blockquote>
  
  <p>Here's the listener definition:  </p>
  
  <pre><code> public UpdateRisqueBrut(risque) {
      console.log(risque.value);
    }
  </code></pre>
  
  <p>I am getting no errors but nothing shows-up in the console once the option is chosen.<br>
  Am I doing anything wrong?</p>