ag-grid context menu shortcut key not working - keyboard-shortcuts

Question

hopefully this will be helpful to someone else. I'm using ag-grid enterprise's context menu feature. I wanted to have a shortcut key corresponding to the menu items, but nothing happened when I pressed the key combination.
To make it more confusing (to me) their own example of how to do this doesn't work:
https://www.ag-grid.com/javascript-grid-context-menu/

Answer 1

The problem is that the shortcut attribute only lists the shortcut but doesn't fire anything. You must also write an event handler for the cellKeyDown event to watch for the shortcut:
import { Component } from '#angular/core';
import { GetContextMenuItemsParams } from 'ag-grid-community';
#Component({
selector: 'app-root',
template:
`
<ag-grid-angular style="width: 500px; height: 500px;" class="ag-theme-balham"
[rowData]="rowData" [columnDefs]="columnDefs"
[getContextMenuItems]="getContextMenuItems"
(cellKeyDown)="onCellKeyDown($event)">
</ag-grid-angular>
`,
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'ag-grid-import-excel';
columnDefs = [
{headerName: 'Make', field: 'make' },
{headerName: 'Model', field: 'model' },
{headerName: 'Price', field: 'price'}
];
rowData = [
{ make: 'Toyota', model: 'Celica', price: 35000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Porsche', model: 'Boxter', price: 72000 }
];
getContextMenuItems(params:GetContextMenuItemsParams ) {
return [
'copy',
'copyWithHeaders',
'paste',
'separator',
{
name: "insert",
shortcut: "Alt + i",
action: function() {
console.log("insert");
},
icon: '<i class="fas fa-plus"></i>'
},
'export',
];
}
onCellKeyDown($event) {
let event:KeyboardEvent = $event.event;
if (event.altKey && event.key === "i") {
console.log('alt i pressed')
}
}
}