angularangular-slickgrid

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


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)
}

Solution

  • 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
    <angular-slickgrid gridId="grid1"
      (onClick)="onCellClicked($any($event))"
    </angular-slickgrid>
    
    1. 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