Angular Language Service v22: inlay hints that actually tell you what your template bindings mean

The Angular Language Service (Angular.ng-template) shipped v22.0.1 on June 11, 2026 — a patch on the June 3 major release that brought two features Angular developers have been asking about for years: 19 individually-configurable inlay hints for Angular templates, and Document Symbols support that makes @if, @for, and template references appear in the VS Code Outline panel. 1

Extension ID: Angular.ng-template · Publisher: Angular Team (Google) · Version: v22.0.1 (2026-06-11) · IDE: VS Code · Language: Angular (HTML templates + inline templates) · License: MIT · Install from VS Code Marketplace

What this extension does

Angular Language Service is the official extension that adds IDE intelligence for Angular templates — both .html external templates and inline templates in .ts files. Without it, VS Code treats @if (user$ | async; as user) as generic HTML with zero type awareness. With it, you get completions scoped to your component's interface, AOT-level diagnostics in the editor (the same errors the compiler would catch at build time), hover info, and Go to Definition that jumps into the component class. 1

The extension is scope-limited to Angular templates — it doesn't apply to plain HTML files, and it requires a tsconfig.json with angularCompilerOptions present. For full type checking, the Angular team recommends setting "strictTemplates": true in that block. 1

Angular Language Service demo showing template autocomplete, hover type info, and go-to-definition in action — Angular Language Service in action: completions, hover types, and diagnostics in a live template. 2

New in v22: 19 inlay hint configs for templates

Before v22, Angular templates gave you no inline type annotations. You'd hover over a binding to read a type, or stare at a wall of (click)="onSave($event)" with no visual hint about what $event actually is. v22.0.0 changes that with a full angular.inlayHints.* namespace — 19 settings, all off by default, each targeting a specific annotation context. 1

A minimal starter config that surfaces the most useful hints without annotation overload:

// .vscode/settings.json
{
  "angular.inlayHints.forLoopVariableTypes": true,
  "angular.inlayHints.ifAliasTypes": "complex",
  "angular.inlayHints.letDeclarationTypes": true,
  "angular.inlayHints.propertyBindingTypes": true,
  "angular.inlayHints.eventParameterTypes": true,
  "angular.inlayHints.interactiveInlayHints": true
}

With forLoopVariableTypes: true enabled, a template like this:

@for (item of products$; track item.id) {
  &lt;product-card [product]=&quot;item&quot; /&gt;
}

renders inline ghost-text showing the inferred type of item — typically something like : Product — without you opening a hover tooltip. The ifAliasTypes: "complex" option only shows the annotation when the aliased expression is non-trivial, keeping simple cases clean. 1

The interactiveInlayHints: true setting makes those annotations clickable — clicking one navigates to the type definition, turning inlay hints into a lightweight navigation mechanism for deeply nested template expressions. 1

To see every available hint at once while exploring a template, you can temporarily set "editor.inlayHints.enabled": "on" globally, then dial back by enabling only the hints that proved useful for your typical work. To kill all Angular hints in one shot, set "editor.inlayHints.enabled": "off" — this silences all editor-wide inlay hints, so coordinate with your team before committing it to workspace settings.

New in v22: Document Symbols in the Outline panel

Document Symbols is the v22.0.0 feature that makes VS Code's Outline panel (Ctrl+Shift+O / Cmd+Shift+O) understand Angular template structure. Before v22, the Outline showed component class members but was silent about what lived inside the template. 3

With angular.documentSymbols.enabled: true (the default), a component with an inline template renders in the Outline as a nested tree:

MyDashboardComponent (class)
└── (template)
    ├── @if (isLoaded)
    │   └── dashboard-grid
    └── @for (widget of widgets)
        └── widget-card

This makes breadcrumb navigation in the editor bar useful for the first time in Angular templates — you can see at a glance which control flow block the cursor is currently inside. 3

The angular.documentSymbols.showImplicitForVariables option (default: false) adds the implicit @for loop variables to the symbol tree — $index, $count, $first, $last, $even, $odd — useful when you're debugging a template that references these and can't immediately remember which implicit variable does what. 1

The extension's GitHub repository — now consolidated into the main angular/angular monorepo (100k+ stars, 27.2k forks):

github.com · GitHub リポジトリ

angular/vscode-ng-language-service

https://github.com/angular/vscode-ng-language-service

コンテンツカードを読み込んでいます…

One more thing v22 ships: bundled TypeScript 6.0

v22.0.0 also bundles TypeScript 6.0, and TypeScript 6.0 enables strict mode by default. If your project previously relied on the extension's bundled TypeScript being lenient, you may see new type errors surface in your templates after upgrading. The fix is explicit: set "strict": false in your tsconfig.json if you're not ready for strict mode, or address the new errors. 3

The Angular team recommends against specifying typescript.tsdk or js/ts.tsdk.path in your VS Code settings. Loading TypeScript from an external path risks an API version mismatch between what @angular/language-service expects and what VS Code provides — the extension silently breaks in that scenario. The safest path is to let the extension use its bundled copy. 1

Security: update if you're running anything below v21.2.4

On May 23, 2026, the Angular team disclosed GHSA-ccq4-xmxr-8hcq, a Critical-severity advisory affecting all Angular.ng-template versions below v21.2.4. Two attack vectors were reported: 4

JSDoc hover injection: The extension rendered JSDoc comments in trusted Markdown mode, allowing an attacker to embed malicious command URIs in JSDoc. Hovering over an affected symbol and clicking the rendered link could execute arbitrary commands on the host.
Unsafe tsdk path loading: The extension read tsdk-related paths from .vscode/settings.json without validating workspace trust, then passed those paths directly to the background Node.js language server. A crafted repository could include a malicious tsserverlibrary.js pointed to by workspace settings — the extension would load and execute it silently when the folder was opened, without any user interaction. 5

Both vectors bypass VS Code's Workspace Trust model. CVSS v4 rated the vulnerability high severity with low attack complexity. The fix shipped in v21.2.4; v22.0.1 includes additional hardening that resolves relative workspace tsdk paths to absolute paths before passing them to the language server. 4

GHSA-ccq4-xmxr-8hcq was rated Critical severity — both attack vectors required no special privilege. 5

Check your installed version now: open the Extensions panel in VS Code, search Angular.ng-template, and confirm the version reads 22.0.1 (or at minimum 21.2.4). Auto-update should have already handled this, but extensions with auto-update disabled or managed via .vsix files may have missed it. 6

Compatibility and requirements

Extension ID	`Angular.ng-template`
Latest version	v22.0.1 (2026-06-11)
IDE	VS Code
Target language	Angular (HTML templates + TypeScript inline templates)
Plain HTML support	No — Angular templates only
Bundled TypeScript	6.0 (strict mode on by default in v22)
Additional editor support	Neovim/Vim via `coc-angular`; Eclipse via Wild Web Developer; Emacs via `lsp-mode`
Required project config	`tsconfig.json` with `angularCompilerOptions`
Recommended template config	`"strictTemplates": true` in `angularCompilerOptions`
Pricing	Free, MIT license
Security: safe version	≥ v21.2.4 (GHSA-ccq4-xmxr-8hcq patched)

1 6

Who should install this: Any VS Code user working on Angular projects. If you're already on v22 — nothing to do beyond enabling the inlay hint settings that matter to your template style. If you're below v21.2.4 for any reason, the security advisory alone makes the update mandatory. The inlay hints and Document Symbols are significant enough quality-of-life changes that they justify an immediate settings.json update even for developers who already had the extension installed and forgot about it. 1