Is there a way in Ag-Grid to have a select-drop-down cell editor also have a custom cell rendered button fire an event?

Question

I am using Angular 5 with Ag-Grid and want a column's cells to have a rich drop down select (I have achieved this), but also want an option to add a new item to this list.

I was trying to achieve this by using a custom renderer to render a button next to the cell value. I wanted this button to fire off an event but when I click the cell either nothing happens, or if I double click the select options pop up displays. I would prefer to not have to create a new renderer component if this is possible to do in a simple renderer function. This is how I was attempting to do it. The button renders, but there is no event fire on click. Is there maybe a way to add the button to the pop-up select editor?

I am trying to achieve something similar to this: https://stackblitz.com/edit/angular-ag-grid-button-renderer?file=src%2Fapp%2Frenderer%2Fbutton-renderer.component.ts but without the extra renderer component.

  columnDef: {
              headerName: col,
              field: col.toLowerCase(),
              type: [],
              editable: true,
              cellRenderer: this.subCatButtonRenderer,
              cellRendererParams: {onClick: this.addSubCat.bind(this)}
              cellEditor: 'agRichSelectCellEditor',
              cellEditorParams: {values: ['subCat1', 'subCat2', 'subCat3']}
          }

  addSubCat(e) {
      console.log(e.rowData);
  }
  subCatButtonRenderer(params) {
      return params.value + ' <button (click)="onClick($event)">Add New</button>';
  }