angular__angular/vscode-ng-language-service

Angular Language Service

Features

This extension provides a rich editing experience for Angular templates, both inline and external templates including:

• Completions lists
• AOT Diagnostic messages
• Quick info
• Go to definition
• Document Symbols for Outline panel, breadcrumbs, and "Go to Symbol"

Download

Download the extension from Visual Studio Marketplace.

Configuring compiler options for the Angular Language Service

The Angular Language Service uses the same set of options that are used to compile the application. To get the most complete information in the editor, set the strictTemplates option in tsconfig.json, as shown in the following example:

"angularCompilerOptions": {
  "strictTemplates": true
}

For more information, see the Angular compiler options guide.

Extension Settings

Document Symbols

Document Symbols enable the Outline panel, breadcrumbs navigation, and "Go to Symbol" (Cmd+Shift+O / Ctrl+Shift+O) to show Angular template elements like @if, @for, structural directives, and template references.

Setting	Default	Description
angular.documentSymbols.enabled	true	Enable Angular-specific document symbols
angular.documentSymbols.showImplicitForVariables	false	Show implicit @for loop variables ($index, $count, $first, $last, $even, $odd)

For TypeScript files with inline templates, the Outline shows only the component class with template symbols nested inside:

MyComponent (class)
└── (template)
    ├── @if (condition)
    └── <button>

Example configuration:

{
  "angular.documentSymbols.enabled": true,
  "angular.documentSymbols.showImplicitForVariables": false
}

Versioning

The language service extension relies on the @angular/language-service and typescript packages for its backend. @angular/language-service is always bundled with the extension, and is always the latest version at the time of the release. typescript is loaded, in order of priority, from:

1. The path specified by typescript.tsdk or js/ts.tsdk.path in project or global settings.
2. (Recommended) The version of typescript bundled with the Angular Language Service extension.
3. The version of typescript present in the current workspace's node_modules.

We suggest not specifying typescript.tsdk or js/ts.tsdk.path in your VSCode settings per method (1) above. If the typescript package is loaded by methods (1) or (3), there is a potential for a mismatch between the API expected by @angular/language-service and the API provided by typescript. This could lead to a failure of the language service extension.

For more information, please see #594.

Installing a particular release build

Download the .vsix file for the release that you want to install from the releases tab.

Do not open the .vsix file directly. Instead, in Visual Studio code, go to the extensions tab. Click on the "..." menu in the upper right corner of the extensions tab, select "Install from vsix..." and then select the .vsix file for the release you just downloaded.

The extension can also be installed with the following command:

code --install-extension /path/to/ngls.vsix

Angular Language Service for Other Editors

• coc-angular for (Neo)vim
• nvim-lspconfig for Neovim
• Wild Web Developer for Eclipse
• lsp-mode for Emacs

Inlay Hints

The Angular Language Service provides inlay hints for templates, showing inline type annotations directly in your code. This feature helps you understand types without hovering over variables.

Examples

<!-- @for loop variables -->
@for (user /* : User */ of users; track user.id) { {{ user.name }} }

<!-- @if aliases (simple and complex) -->
@if (currentUser; as user) { {{ user.name }} } @if (currentUser.profile; as profile /* : Profile */)
{ {{ profile.name }} }

<!-- @let declarations -->
@let count /* : number */ = items.length;

<!-- Template references -->
<input #emailInput />

<!-- Event bindings -->
<button (click)="handleClick($event /* : MouseEvent */)">
  <!-- Property bindings -->
  <app-child [data /* : Data */]="myData"></app-child>
</button>

Configuration

All inlay hints settings are under angular.inlayHints.*:

Setting	Default	Description
eventParameterTypes	false	Show $event types for event bindings
forLoopVariableTypes	false	Show types for @for loop variables
ifAliasTypes	false	Show types for @if aliases. Set to 'complex' for complex expressions only
letDeclarationTypes	false	Show types for @let declarations
referenceVariableTypes	false	Show types for template reference variables
suppressWhenTypeMatchesName	false	Suppress variable type hints when variable name matches type
arrowFunctionParameterTypes	false	Show parameter types for arrow functions
arrowFunctionReturnTypes	false	Show return types for arrow functions
parameterNameHints	'all'	Show parameter names: 'none', 'literals', or 'all'
suppressWhenArgumentMatchesName	true	Suppress parameter hints when argument matches parameter name
propertyBindingTypes	false	Show types for property/input bindings
pipeOutputTypes	false	Show pipe output types
twoWayBindingSignalTypes	false	Show signal types for two-way bindings
requiredInputIndicator	'none'	Required input indicator: 'none', 'asterisk', 'exclamation'
interactiveInlayHints	false	Enable click-to-navigate type definitions
hostListenerArgumentTypes	false	Show @HostListener argument types
switchExpressionTypes	false	Show @switch expression types
deferTriggerTypes	false	Show @defer trigger types

To disable all Angular inlay hints, you can set editor.inlayHints.enabled to "off" in your VS Code settings.