Cannot use onAngularGridCreated emitter

Question

I have an issue with the Angular Slickgrid library, To modify the sorting button function I need to use the onAngularGridCreated event, (which, I assume) return the instance of my grid. But when I add the following line to my angular-slickgrid element:

<angular-slickgrid gridId="{{this.gridData.id}}"
                   [columnDefinitions]="columnDefinitions"
                   [gridOptions]="gridOptions"
                   [dataset]="dataset"
                   (onAngularGridCreated)="angularGridReady($event.detail)"
>
</angular-slickgrid>

I get this error:

Event onAngularGridCreated is not emitted by any applicable directives nor by angular-slickgrid element

Even when looking at the Documentation I cannot figure out how to make it work.

Here is my import of angular-slick grid in app-modules:

imports: [
    ...
    AngularSlickgridModule.forRoot({
      locales: localeFrench
    })
],

there's just not enough information in your question to provide any answer, I can only guess that maybe you didn't import Angular-Slickgrid in your App module but that's just a shot in the dark, anyway I would suggest to clone the [Angular-Slickgrid-Demos](https://github.com/ghiscoding/angular-slickgrid-demos) to get you started — ghiscoding, Feb 17 '22 at 13:36
I've already imported Angular-Slickgrid in the app module: AngularSlickgridModule.forRoot({ locales: localeFrench }) my grid is perfectly working. but when I add the onAngularGridCreated to my element, it makes ts compilation crash. Basically i followed the WIKI you provided in the GitHub repo. — NCoding, Feb 18 '22 at 10:26
sorry but there is not enough details for anyone to help you with this question and I'm not good at guessing games, I again strongly suggest you to clone the `Angular-Slickgrid-Demos` and look at its code, the issue is most probably somewhere in your code not the lib. The `Angular-Slickgrid-Demos` gets updated on every new release so that I know the lib is working as expected. Also note that the Wiki are written for the latest version of the lib and Angular, if you use older versions then it might be different — ghiscoding, Feb 21 '22 at 15:19
The same issue happens when I clone your project. I inspected it bu didn't saw any differences with my code. What infos do I need to provide to help you see the problem clearer ? — NCoding, Feb 23 '22 at 10:34
All the examples should work fine, every code change runs all the 500 Cypress E2E tests so you saying the demo also has a problem is hard to believe unless you changed something. On the other end, `onAngularGridCreated` is no longer an Event Emitter but a Custom Event (since version 3), you can see in the [migration to 3](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Migration-to-3.x#event-emitters-are-replaced-with-custom-events-event-data-accessibility-also-changes), I need to remove Event Emitter from all Wikis. Also as per your comment, I need full repro stackblitz — ghiscoding, Feb 23 '22 at 14:24
So ! I found out what was happening. It is clearly working, the thing that made me think it was not is my IDE which has simply decided to tell me that this event does not exist and block the entire thing. Sorry for the inconvenience. — NCoding, Feb 23 '22 at 20:40

ghiscoding · Accepted Answer · 2022-02-23T23:05:40.823

After all the comments exchanged on the question, the issue is with Angular Language Service used by the IDE (typically Visual Studio Code) and throws some errors when strictTemplates is enabled (see Angular-Compiler-Options). Seriously I wish that they would fix this with Custom Event but as far as I know, they have not and we can only bypass the error following the steps below.

You have 3 ways of dealing with this

disable strictTemplates (simplest but you won't see all other potential valid errors)

// tsconfig.app.json
{
    "extends": "./tsconfig.json",
    "angularCompilerOptions": {
      "strictTemplates": false
    },
  }

use only the Event as argument type and then cast detail property to AngularGridInstance

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

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

use $any() in the View

<angular-slickgrid gridId="grid28"
    [columnDefinitions]="columnDefinitions"
    [gridOptions]="gridOptions"
    [dataset]="dataset"                    
    (onAngularGridCreated)="angularGridReady($any($event).detail)">
</angular-slickgrid>

This was also reported by another user in this Angular-Slickgrid Discussion and I also asked another SO Question myself related to this problem:

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

Personally I am not using the strictTemplates, so I never had this problem but if that is something you want to keep then go with option 2 or 3

Cannot use onAngularGridCreated emitter

1 Answers1