6

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.

enter image description here

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.

ghiscoding
  • 12,308
  • 6
  • 69
  • 112

1 Answers1

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>
JayChase
  • 11,174
  • 2
  • 43
  • 52
  • hmm ok but that is just a patch and isn't much better than doing `(event as CustomEvent)` or just slightly less to code. I would rather find a real fix if possible instead of just silencing the issue – ghiscoding Aug 13 '21 at 12:33
  • also I assume your answer is partially wrong and should instead be `handleOnSelectedRowsChanged($any($event).detail.eventData, $any($event).detail.args)` to align my original issue shown on top – ghiscoding Aug 13 '21 at 14:36