(strictTemplates) Template error with version 3.0.4

[sapnildessai]

Hi @ghiscoding ,
I have upgraded to version 3.0.4 of the slick grid. everything went well except using $event.detail in angularGridReady event. Could you please let me know if i am missing any thing here?

I have checked your examples and did same changes to use this event. But no luck. This was working pretty fine in 2.x version of the grid.

Thanks.

[ghiscoding]

This looks like your upgrade of the package didn't work, you should check the version from your node_module and make sure that your Angular-Slickgrid is really the latest version 3.0.4 because that surely won't work if it's on the version 2.x. If you could, it would be better to delete the node_module folder and restart from scratch and also make sure your package.json has the latest version 3.0.4.

Oh maybe another thing, it does help to restart the Angular build and/or VSCode once in a while but I assume you did that a few times already.

[sapnildessai]

Unfortunately that didn't fix the issue. I have tried below things

• Remove entire node module and then do npm install
• restart webpack server
• cross checked slick grid version in my package json as well as slick grid package json under node modules

For now I did a workaround by setting angularGrid type to any instead of the AngualarGridInstance. But I need to find the root cause for this soon

Thanks

[ghiscoding]

I guess you're using the "Angular Language Service" VSCode extension and maybe the strict mode? The thing is that it's detecting it as an Event type but in reality it's a CustomEvent type and that is the only way to provide data to a Custom Event is through the detail property as can be seen on MDN - Adding custom data – CustomEvent(). So I think your VSCode extension, it could be that language service or another extension or the strict mode, is not finding the correct type it should display it as CustomEvent not just Event. I'm no longer using it as a Event Emitter, they're all Custom Event in this new version and for some reason Angular think this is an Event Emitter not a Custom Event.

Another workaround would be to leave it as $event but then read the detail property from your handler and that would get rid of all the errors.

angularGridReady(event: CustomEvent) {
    this.angularGrid = event.detail as AngularGridInstance;
    this.gridObj = this.angularGrid.slickGrid;
}

it might still give you error and if so you can do this instead and that will surely do it

angularGridReady(event: Event) {
    this.angularGrid = (event as CustomEvent).detail as AngularGridInstance;
    this.gridObj = this.angularGrid.slickGrid;
}

I don't know if there's anything I can do on my side but the fact is that I will not go back to Event Emitter, I will stick with Custom Event because I can use them on the fly while you can't do that with Event Emitter (they have to be created first) and is just not good with all the dynamic events that get created by Angular-Slickgrid, SlickGrid itself and its DataView as well.

If you find a way to change the type from Event to CustomEvent into the template then let me know and I can change it in Angular-Slickgrid but so far everything I found is all about using @output with Event Emitter which I really don't want to use. At the end Angular is completely wrong on the type and it doesn't seem to provide any ways (I couldn't find on google) to change the event type to Custom Event. The only real solution would to be disable the strict mode strictTemplates which you're probably using but it's not exactly great.

[ghiscoding]

also from what I can see when you have strictTemplates enabled, the SlickGrid events would also throw the same error even in Angular-Slickgrid version 2.x. It seems that Angular really wants this to be Event and nothing else, which is wrong with my lib. I would suggest to disable that flag if possible, and if you can't then cast the Event into a CustomEvent in your class file (not ideal but unless Angular provides a way, which I don't know about, to change the Event into a different type then we are stuck with this error)

EDIT

I posted a Stack Overflow question about this problem, hopefully someone can answer it, perhaps you can upvote it as well to get more traction. Any ways to use raw Custom Event (not Event Emitter) without strictTemplates to complain about $event not being a Custom Event type?

[sapnildessai]

Thanks a lot @ghiscoding . Catching event and then typecasting it to GridInstance seems to work. Sure I will surely give it a try to have it changed in template and let you know. :)

[ghiscoding]

or you can just disable the strictTemplates you probably have it enabled without knowing. Like I said earlier, version 2.x would also give the same error when strictTemplates is enabled. So you probably have new strict flags turned On without you realizing it.

[ghiscoding]

a proposed answer from the SO Question I asked is to use the $any() in the View like such (onSelectedRowsChanged)="handleOnSelectedRowsChanged($any($event).detail.eventData, $any($event).detail.args)" it doesn't completely fix the issue (I find that it's more of a patch) but I guess it's a bit shorter than casting to CustomEvent in the component? Anyway, at this point these are the ways of avoiding these errors to show up... or like I also said earlier, you can disable strictTemplates mode (it's always disabled on my side)

[sapnildessai]

Thanks @ghiscoding .
I have used this way, I think its more clear to see what we are converting into what

angularGridReady(event: Event) { this.angularGrid = (event as CustomEvent).detail as AngularGridInstance; this.gridObj = this.angularGrid.slickGrid; }

Thanks