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

Question

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 shown below (at this point all is good)

<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...

It breaks when enabling strictTemplates

When I decided to enable the strictTemplates into the angularCompilerOptions that is when Angular started complaining about $event being a type Event and it complains that detail is not a valid property BUT in my implementation it's not of type Event, it should be detected as type CustomEvent.

Why is Angular not detecting it as a CustomEvent? Are there any ways of enforcing the type to be detected as CustomEvent or overriding the type to be CustomEvent without Angular complaining?

The only (ugly) way I found so far to bypass these errors is to make it think that 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.

Would that be fixable via an Angular Directive? I've seen this other SO Angular 4 trigger custom event - EventEmitter vs dispatchEvent() which kinda go in that route but I'm still unsure on what to do with this.

Answer 1

Using the $any() function to disable type checking for $event might get around this error.

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