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:

<!-- @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.