How to open Modal Dialog from ag-grid with Context Menu Customize

Question

I found a problem in the code. I'm trying to make menu customizations in the Angular ag-grid by right clicking on a cell then displaying menu customizations such as view details, edit data, and delete. when I click edit, the component dialog appears but apparently the modal dialog doesn't appear because there is a problem with the coding, please help.

data.component.ts

 openComposeDialog(): void {
    const dialogRef = this._matDialog.open(MailboxComposeComponent, { disableClose: true });
    dialogRef.afterClosed()
        .subscribe((result) => {
            console.log('Compose dialog was closed!');
        });
}

// costume menu
getContextMenuItems(
    params: GetContextMenuItemsParams
): (string | MenuItemDef)[] {
    var result: (string | MenuItemDef)[] = [
        {
            // custom item
            name: 'Edit Data',
            action: () => {
               this.openComposeDialog()
            },
        },
    ];
    return result;
}

below is the error display

core.mjs:7643 ERROR TypeError: Cannot read properties of undefined (reading 'openComposeDialog')
at Object.action (kandidat.component.ts:424:26)
at AgMenuItemComponent.onItemSelected (ag-grid-community.auto.esm.js:41776:25)
at HTMLDivElement.<anonymous> (ag-grid-community.auto.esm.js:41589:75)
at ZoneDelegate.invokeTask (zone.js:406:31)
at Object.onInvokeTask (core.mjs:26278:33)
at ZoneDelegate.invokeTask (zone.js:405:60)
at Zone.runTask (zone.js:178:47)
at ZoneTask.invokeTask [as invoke] (zone.js:487:34)
at invokeTask (zone.js:1600:14)
at HTMLDivElement.globalZoneAwareCallback (zone.js:1626:17)

Answer 1

openComposeDialog() is out of scope in this case, to fix you can add the component parent to the GridOptions context like so:

   gridOptions: GridOptions = ({
   context: {
     componentParent: this
   }, ...})

Then you can access via params.context in getContextMenuItems()

getContextMenuItems(
    params: GetContextMenuItemsParams
): (string | MenuItemDef)[] {
    var result: (string | MenuItemDef)[] = [
        {
            // custom item
            name: 'Edit Data',
            action: () => {
               const ctx = params.context.componentParent as <ComponentName>;
               ctx.openComposeDialog()
            },
        },
    ];
    return result;
}