Signal input error highlighting

[ste4net]

Hello
Binding with signal input (Angular 17) is reported as error with highlighting.

<app-test [classicInput]="myString" [sgnInput]="myString" />

@Component({
  selector: 'app-test',
  standalone: true,
  imports: [],
  template: ` <p>test works!</p>`
})
export class TestComponent {
  sgnInput = input("notWork");
  @Input()
  classicInput:String="work"
}

@Component({
  selector: 'app-testCont',
  standalone: true,
  imports: [TestComponent],
  template: `
    <p>
      test works!
      <app-test [classicInput]="myString" [sgnInput]="myString" />
    </p>
  ` 
})
export class TestContainerComponent {
   myString:String="my text"
}

[natekemp21]

Please work on this! It makes working with input signals very painful.

[rajeev-eledeath-google]

I spent a lot of time trying to resolve errors when I converted my project to input signals, went through documentation multiple times and realised that this was a angular service problem... please correct this

[Khyalis]

The report unfortunately doesn't state the error message in question.

Using current extension version, which utilizes angular language service version 17.0.0, it appears to be

Can't bind to 'sgnInput' since it isn't a known property of 'app-test'.
1. If 'app-test' is an Angular component and it has 'sgnInput' input, then verify that it is included in the '@Component.imports' of this component.
2. If 'app-test' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@Component.schemas' of this component.

The language service version bundled with the extension might not support signal inputs, which would explain the issue.
The extension will attempt to use the language service installed with the project, which might help when working with an angular 19 project. But it will only do so if the project finds itself directly within the solution folder, not in the, arguably more common, case of using a nested project folder, which was also the setup during my attempt to reproduce the issue.

When trying with an updated angular language service (19.0.3), the error message I am no longer getting this message.
Instead, what I am getting is

Type 'String' is not assignable to type 'string'.
  'string' is a primitive, but 'String' is a wrapper object. Prefer using 'string' when possible.

which I believe is to be expected and which would disappear after either changing the declaration of sgnInput to signal<String>("notWork"), or changing the type of myString to string.

I would assume your issue could be resolved/worked around by

• changing the solution in a way that ensures versions of @angular/language-server and typescript compatible with the project is installed in the solution folder
• waiting for an update of the extension bumping the bundled version of @angular/language-server to one that supports signals.