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 to get you started — ghiscoding
– ghiscoding, Commented Feb 17, 2022 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
– NCoding, Commented Feb 18, 2022 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
– ghiscoding, Commented Feb 21, 2022 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
– NCoding, Commented Feb 23, 2022 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, I need to remove Event Emitter from all Wikis. Also as per your comment, I need full repro stackblitz — ghiscoding
– ghiscoding, Commented Feb 23, 2022 at 14:24

ghiscoding · Accepted Answer · 2022-02-23 23:05:40Z

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

Collectives™ on Stack Overflow

Cannot use onAngularGridCreated emitter

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related