Highlight Angular Signal Type Variables in Class and Template Files

[gabrielnemeth]

🚀 Feature request

Is your feature request related to a problem? Please describe.

The Angular Language Service in VS Code does not highlight signal type variables in both the class and template files. This makes it harder to tell signal variables apart from regular properties in a project. WebStorm already highlights signals, and this helps with recognizing them quickly.

Feature Type

What does this request affect:

• Angular Language Service VSCode extension
• Angular Language Service server

Describe the solution you'd like

Add highlighting for signal type variables, both in the class and template files, so it's easy to distinguish them from other variables.

[FjedorGaede]

Any updates on this?

Coming from WebStorm, working with Angular signals in VSCode feels much harder. In WebStorm, signals are visually distinct from functions and properties, and my color scheme (dracula) even shows a difference between when a signal is defined and when it’s used. This makes the lack of clarity in VSCode confusing, especially since signals are such a key feature in modern Angular.

Am I missing something, or is better support planned?

See my attached screenshots:
Webstorm

VSCode

[KirillAdeev]

any news on this?

[CactusCorantin]

+1 2025 :)

[dtomaszewski]

+1

[forivall]

Doing an initial investigation if some enterprising person wants to implement this, I think this would be done with a custom semantic token modifier:

{
  "contributes": {
    "semanticTokenModifiers": [
      {
        "id": "signal",
        "description": "Annotates a symbol that is a signal"
      }
    ]
  }
}

To provide the semantic tokens, you would

• update the angular language service and
• provide a custom getEncodedSemanticClassifications which does a lookup in typescript's symbol table to a custom modifier with spans for signal,
• and, to provide that back into vscode, implement the DocumentSemanticTokensProvider in this extension, (and i'm not sure of this, as i'm just browsing on github and havent clone'd the repo), in https://github.com/angular/vscode-ng-language-service/blob/main/client/src/client.ts
  • either: add the semantic token related functions to the middleware in the config,
  • or register a separate SemanticTokensProvider.

I'd love to get feedback on this plan from the maintainers, and hopefully that can help plan out the work for either myself or someone else to get working on this!