Vscode-ng-language-service: Unknown method .bind

I just saw this with Angular Language Service and VS Code 1.13. happens in Heroes Tutorial when adding (save()) method to hero-detail-component.html

Code functions fine, but shows red squiggly lines even though method is clearly there.

@bkbonner I cannot reproduce this with https://angular.io/generated/zips/toh-pt6/toh-pt6.zip Do you have a modification to this that shows this issue.

I can try to send my codebase. Let me see if there is something else different in i you're that lets it work.

Hi @chuckjaz . So if I go and modify the .ts file and remove the save() method and then go to the corresponding html file and modify the method name call in the html file, it underlines it. If I add the method back on the .ts side, and go back to the .html file, the squiggly line stays until I click ctrl+space and select one of the method options in the drop-down.

I'm not sure if this is how it was behaving before, but maybe it's how the validation of the method's existence is being triggered that is causing the confusing result.

I included a video to show how it looks: https://youtu.be/UjfFprgvTQg no audio, but I included closed captions to describe it.

I am facing same problem as well ...

I have the same problem using .bind in a template.

It works but we get errors.

+1 same issue here

Any solution yet?

+1 here too!

+1 exact same issue. Any updates?

Same error with .bind(this) here.

Confirmed still happening in VS Code with angular language service. Ionic 3, Angular 5.

Also happening with 'hasError' in extension 0.1.9 in VS Code 1.24.1:

<div *ngIf="form.get('phone').hasError(validation.type)">

complains that hasError is not a function, although it is (in the AbstractControl class of Angular forms).

Edit: although this can be fixed by adding a "!" thus:
<div *ngIf="form.get('phone')!.hasError(validation.type)">

That's because the get method returns AbstractControl _or_ null. I presume the language service is complaining that 'hasError' is not a function of 'null'. It would be clearer if the error was:
The expression might be null
as it is for other functions, e.g. <div *ngIf="form.get('phone').errors[validation.type]">
produces the error The expression might be null.

Also happening with $any(), which should always exist (https://angular.io/guide/aot-compiler#disabling-type-checking-using-any)

ex)

<input [(ngModel)]="$any(content).houseId" />

[Angular] Unknown method '$any'

Same issue here Ionic3 Angular5

I got the same error in VS Code v1.25.1 + Angular v6.0.1

Got the same error in VS code 1.25.1

Version: 1.25.1
Commit: 1dfc5e557209371715f655691b1235b6b26a06be
Date: 2018-07-11T15:40:20.190Z
Electron: 1.7.12
Chrome: 58.0.3029.110
Node.js: 7.9.0
V8: 5.8.283.38
Architecture: x64

Same error in Angular 5 and VS Code 1.26.0

I have the same problem in Angular 6.

[displayWith]="displayFn.bind(this)"

Everything works fine and I see no errors while running, just in the editor:

[Angular] Unknown method 'bind'

The same happens to me.

[myFun]="myService.myFunc.bind(myService)"

Is there any way to surpress this warning instead of everyone saying I have the same problem?

try adding a semicolon after function name like this

Test Button

This seems to remove the warning.

Honestly, I have no idea if this is still an issue.
VS Code & the ALS have been updated a lot since then, and I haven't seen this warning in a long time...

Yes, this is still an issue.

VS Code About:

Version: 1.31.1
Commit: 1b8e8302e405050205e69b59abb3559592bb9e60
Date: 2019-02-12T02:19:29.629Z
Electron: 3.1.2
Chrome: 66.0.3359.181
Node.js: 10.2.0
V8: 6.6.346.32
OS: Linux x64 4.15.0-45-generic

Try to put ; after it.On Feb 18, 2019 5:09 AM, Rafael notifications@github.com wrote:Yes, this is still an issue.

VS Code About:
Version: 1.31.1
Commit: 1b8e8302e405050205e69b59abb3559592bb9e60
Date: 2019-02-12T02:19:29.629Z
Electron: 3.1.2
Chrome: 66.0.3359.181
Node.js: 10.2.0
V8: 6.6.346.32
OS: Linux x64 4.15.0-45-generic

—You are receiving this because you commented.Reply to this email directly, view it on GitHub, or mute the thread.

@multilexus this is not working.

Yes, this is still an issue.

VS Code About:

Version: 1.31.1
Commit: 1b8e8302e405050205e69b59abb3559592bb9e60
Date: 2019-02-12T02:19:29.629Z
Electron: 3.1.2
Chrome: 66.0.3359.181
Node.js: 10.2.0
V8: 6.6.346.32
OS: Linux x64 4.15.0-45-generic

Same problem here :-/ Any solution?

+1 with angular 7 displayWith on a mat-autocomplete

Works fine but warnings

@multilexus is right i'm working with Angular 7 in VS code 1.31.1

It is still a problem. Any news?

The same happens to me.

[myFun]="myService.myFunc.bind(myService)"

write like this:--
[myFun]='handleFun'
---in html

this.handleFun=this.myService.myFunc.bind(myService);
--in ts file

Yes, this is still an issue.

VS Code About:

Version: 1.31.1
Commit: 1b8e8302e405050205e69b59abb3559592bb9e60
Date: 2019-02-12T02:19:29.629Z
Electron: 3.1.2
Chrome: 66.0.3359.181
Node.js: 10.2.0
V8: 6.6.346.32
OS: Linux x64 4.15.0-45-generic

Same problem here :-/ Any solution?

write like this:--
(click)='handleFun'
---in html

this.handleFun=this.setLanguage.bind(this,language);
--in ts file

+1 with angular 7 displayWith on a mat-autocomplete

Works fine but warnings

write like this:--
[displayWith]='displayFun'
---in html

this.displayFun=this.displayFun.bind(this);
--in ts file

Encountered this bug when using $any() method in <ng-template> in Angular 7.

Still complaining for hasError in
<div *ngIf="form.get('phone').hasError(validation.type)">
VSCode 1.34.0
extension 0.800.0

Until they fix it, there's a workaround (at least for myMethod.bind(this):

bindMyMethodWithThis() {
    return this.myMethod.bind(this);
}

<MyComponent [myInput]="bindMyMethodWithThis()">

Until they fix it, there's a workaround (at least for myMethod.bind(this):

bindMyMethodWithThis() {
    return this.myMethod.bind(this);
}

<MyComponent [myInput]="bindMyMethodWithThis()">

It's a bad idea to use bind function inside template. bind function creates a new function on every call. So you will create a new function on every change detection. it's better to assign arrow function to class property:

```typescript
myMethod = (param1: any, param2: any) => {
// method logic
}

```html
<MyComponent [myInput]="myMethod">

@andrius-pra Nice idea, I'll now use this, thanks.

Sorry everyone that it took so long for us to address this issue. The PR above should fix it.

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.

<sub>_This action has been performed automatically by a bot._</sub>