angular-slickgrid gettting Property 'detail' does not exist on type 'Event' on angular 16

Question

I'm working with angular-slickgrid v6 in angular 16.While using (onClick)="onCellClicked($event.detail.eventData, $event.detail.args)" to fetch the selected row,I get this error Property 'detail' does not exist on type 'Event'. (onClick)="onCellClicked($event.detail.eventData, $event.detail.args)" .Now how to get the selected row ? Below I'm attaching my code: html file:

<angular-slickgrid gridId="grid1"
                     [columnDefinitions]="columnDefinitions"
                     [gridOptions]="gridOptions"
                     [dataset]="dataset"
                     (onClick)="onCellClicked($event.detail.eventData, $event.detail.args)"
                      >
  </angular-slickgrid>

Now adding typescript file:

 this.gridOptions = {
  enableAutoResize: false,
  enableSorting: true,
  gridHeight: 400,
  gridWidth: 1500,
  enableFiltering: true,
  enableExcelExport: true, registerExternalResources: [new ExcelExportService()]
};
onCellClicked(e:any,args:any) {
// let row=args.item;
// console.log(e.detail.args.grid.getData())
// console.log(e.detail.eventData)
}

Answer 1

You most probably have strictTemplates enabled (which is enabled by default when creating a new project from the CLI) and this is causing issues in Angular-Slickgrid because all the SlickGrid and Angular-Slickgrid events are Custom Event which Angular complains about because it doesn't find its types, this is extensively discussed in this Angular-Slickgrid discussion Template error and I also opened a Stack Overflow question on that matter as well. How to use Custom Event (not Event Emitter) without `strictTemplates` to complain about `$event` not being a Custom Event type?

Also see Angular type checking docs

You have 3 approaches to deal with this

1. disabled strictTemplates in your tsconfig.json config
2. cast the event in the template to $any type

• $any($event) for example $any($event).detail.eventData

<angular-slickgrid gridId="grid1"
  (onClick)="onCellClicked($any($event))"
</angular-slickgrid>

3. cast the event in the ViewModel component to CustomEvent

<angular-slickgrid gridId="grid1"
  (onClick)="onCellClicked($event)"
</angular-slickgrid>

onCellClicked(e: CustomEvent) {
 const { eventData, args } = (event as CustomEvent).detail as any;
}

// or simply
onCellClicked(e: any) {
 const eventData = event.detail.eventData;
}

The simplest is obviously the option 1 but you lose the strictness on the view templates (which personally I don't care that much and I usually disable it myself).

I added a Troubleshooting Section on the Angular-Slickgrid readme.

It was also explained in the On Events - Wiki