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
    })
],

Answer 1

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

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

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

2. 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;
}

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