language-service: Member (function) is not callable in ng-template

[kernwig]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

As seen in demo for ngx-datatable project, this usage:

<ng-template let-column="column" let-sort="sortFn" ngx-datatable-header-template>
    <span (click)="sort()">{{column.name}}</span>
</ng-template>

Results in an error of:

Error:(32, 2) Angular: Member sort is not callable

Expected behavior

No error. sortFn is a callable function and the code does in fact work correctly.

Minimal reproduction of the problem with instructions

Run demo for ngx-datatable through the language-service.

What is the motivation / use case for changing the behavior?

I like my error console to be empty. Having to constantly mentally process and dismiss this error in the IDE is unproductive.

Please tell us about your environment:

IntelliJ IDEA 2017.1.1
Build #IU-171.4073.35, built on April 6, 2017
JRE: 1.8.0_112-release-736-b16 x86_64
JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
Mac OS X 10.12.4

• Angular version: 4.0.3

• Browser: N/A

• Language: TypeScript 2.2.2

• Node (for AoT issues): node --version = v7.9.0

[marcodelu]

+1

[MohibWasay]

+1

[manekinekko]

@chuckjaz any updates on this?

[dark-bm]

Any progress on this issue ?

[ThrownLemon]

Progress? It's very annoying...

[freak0]

Same happening here, using Angular 5.2.8.

[Morente5]

Same here, tested on Angular 5.2.7 and 6.0.0-beta.7 regarding the same ng-bootstrap modal example referenced above.

[changhuixu]

Same here, Angular 5.2.9 and ng-bootstrap 1.0.4.
ng build --prod works fine and my app also works.
Not sure why the intellisence complains.
Any progress on this issue?

[auderer]

Same here, using VSCode.

[ihusnja4]

Until this gets somehow fixed, you can workaround this by creating a trigger method and use it like this:

<ng-template let-column="column" let-sort="sortFn" ngx-datatable-header-template>
    <span (click)="trigger(sort)">{{column.name}}</span>
</ng-template>

In component add the method:

@Component(...)... {
    ...
    trigger(callback, ...args) {
        return callback(...args);
    }
}

[Liero]

Another workaround is proposed here: angular/vscode-ng-language-service#234 (comment)
I haven't tried it myself, but it makes sense.

[dombakargy]

That's caused by "Angular Language Service" plugin in VS-Code. Just uninstall it.

[auderer]

This workaround is working for me:

<ng-template let-column="column" let-sort="sortFn()" ngx-datatable-header-template>
    <span (click)="sort">{{column.name}}</span>
</ng-template>

By invoking the function inside the let- assignment instead of inside the (click) handler, you will avoid this bug and still get the same functionality.

[barisbikmaz]

All this workarounds will not work if you have to pass a template variable to the function.
As an example this will not work

<ng-template let-item="item" let-highlight="highlight(item)">
    <span (click)="highlight">{{item.name}}</span>
</ng-template>

this works

<ng-template let-item="item" let-highlight="highlight">
    <span (click)="highlight(item)">{{item.name}}</span>
</ng-template>

I have still this issue with angular-language-service 6.1.

[isaacplmann]

The workaround that I use is this:

Instead of passing the highlight function directly, pass a fns object that has this content { highlight: highlight }

And use it like this with no errors:

<ng-template let-item="item" let-fns="fns">
  <span (click)="fns.highlight(item)">{{item.name}}</span>
</ng-template>

[barisbikmaz]

@isaacplmann Thanks for the workaround.
But what I mean is that the code actually works. It's just the angular-language-service complaining. So either they fix this error message officially or recommend another way. I don't wonna really have workarounds in my code which nobody understands in few months.

[Darkein]

I've got the same problem and found another workaround: use fn.call(thisArg, ...args)

<ng-template ng-label-tmp ng-label-tmp let-item="item" let-clear="clear">
    <span (click)="clear.call(undefined, item)">clear</span>
</ng-template>

[jerguslejko]

any updates?

[ryansheehan]

Almost six more months. Still running into this issue. Worked around by boxing the function in an object.

[priscilalima]

any updates?

[jpike88]

@kyliau this one is a real annoyance.

Type Function should be callable.

[kyliau]

Sorry it took so long, #33782 should fix this.

[Siedlerchr]

I am still experiencing this error with language service 0.900.0 in combination with transloco, See for an example:
ngneat/transloco#177

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}