0
votes

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>
2

2 Answers

1
votes

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;
-1
votes

I would create a shared service, that is injected into both the parent component and the overlay component.

The shared service could expose a 'notify' method, which calls next on a Subject. It could also expose a 'getNotifications' that returns the Subject as an Observable.

Then the parent component can subscribe to the Observable, and the overlay can call the 'notify' method, to communicate data to the parent component.