How to emit an event within a NoRowsOverlayComponent?

Question

I want to display an overlay container which includes a button. When the button get clicked an event should be propagted to the parent component. In my research I found that there was the option to set 'noRowsOverlayComponentParams' which isn't present in my version(22.1.2). I am also not able to get the click event of the button.

Is there a workaround or a setting which solves my problem?

PS: The component is shown right but I can't get the click event.

Grid-Options:

let options: any = {
      defaultColDef: {
        sortable: true,
        filter: true,
        resizable: true
      },
      suppressPaginationPanel: true,
      columnDefs: [...],
      paginationPageSize: 10,
      context: { componentParent: this},
      domLayout: 'normal',
      enableCellTextSelection: true,
      autoSizePadding: 2,
      noRowsOverlayComponent: 'myNoRowsComponent',
      frameworkComponents: {
        myNoRowsComponent: MyNoRowsComponent
      }
    };

MyNoRowsComponent.ts:

import { Component } from '@angular/core';
import { INoRowsOverlayAngularComp } from '@ag-grid-community/angular';
import { INoRowsOverlayParams, IAfterGuiAttachedParams } from '@ag-grid-enterprise/all-modules';

@Component({
  selector: 'app-my-no-rows',
  templateUrl: './my-no-rows.component.html',
  styleUrls: ['./my-no-rows.component.scss']
})
export class MyNoRowsComponent implements INoRowsOverlayAngularComp {

  params: any;

  agInit(params: INoRowsOverlayParams): void {
    this.params = params;

  }

  clickImport() {
    // this.params.context.componentParent.clickButton(); // <-- here I want to emit an event
  }

  afterGuiAttached?(params?: IAfterGuiAttachedParams): void { }

}

MyNoRowsComponent.html:

<button (click)="clickImport()">My Button</Button>

Answer 1

For those who searching this problem, I have found that pointer-events set as disabled for overlays. simply add this to your button class:

pointer-events: all;