Any ways to use raw Custom Event (not Event Emitter) without `strictTemplates` to complain about `$event` not being a Custom Event type?

I created an Angular library, named Angular-Slickgrid, which is a wrapper of SlickGrid which is an old JavaScript/jQuery library and I can use any of the Custom Event sent by SlickGrid without any issues as this example

<angular-slickgrid gridId="grid28"
    [columnDefinitions]="columnDefinitions"
    [gridOptions]="gridOptions"
    [dataset]="dataset"                    
    (onSelectedRowsChanged)="handleOnSelectedRowsChanged($event.detail.eventData, $event.detail.args)">
</angular-slickgrid>

and everything is good and it all works

handleOnSelectedRowsChanged(event: any, args: OnSelectedRowsChangedEventArgs) {
    console.log(args);
}

in my lib, I simply dispatch these events with a small function that has the following code

/** Dispatch of Custom Event, which by default will bubble & is cancelable */
dispatchCustomEvent(eventName: string, data?: any, isBubbling: boolean = true, isCancelable: boolean = true) {
  const eventInit: CustomEventInit = { bubbles: isBubbling, cancelable: isCancelable };
  if (data) {
    eventInit.detail = data;
  }
  return this.elm.nativeElement.dispatchEvent(new CustomEvent(eventName, eventInit));
}

Everything is great and life is beautiful… until I enable the strictTemplates into the angularCompilerOptions then Angular complains that $event is of type Event and does not have a detail property BUT in my implementation that is wrong, it’s not of type Event it’s really of type CustomEvent. Why is Angular not detecting it as a CustomEvent? Any ways of forcing the type to be CustomEvent without Angular complaining?

The only way I found so far to bypass these errors is make it thing it’s a type Event but then cast it back to CustomEvent and this works but it adds so much code which is inconvenient

<angular-slickgrid gridId="grid28"
    [columnDefinitions]="columnDefinitions"
    [gridOptions]="gridOptions"
    [dataset]="dataset"                    
    (onSelectedRowsChanged)="handleOnSelectedRowsChanged($event)">
</angular-slickgrid>

and then cast the Event to CustomEvent and even though this works it adds so much code which is inconvenient

handleOnSelectedRowsChanged(event: Event) {
    const args = (event as CustomEvent).detail.args as OnSelectedRowsChangedEventArgs;
    console.log(args);
}

I don’t want and cannot use Event Emitter because these events are dynamics and because these events are coming from a JavaScript library, there are also other technical reasons but again I cannot use Event Emitter.

enter image description here

Source: Ask Javascript Questions

LEAVE A COMMENT