Feature Request: Document Symbols support for Angular templates

✅ Status: Implemented in PR #66690

Description

The Angular Language Service should provide Document Symbols for Angular templates to enhance IDE features like the Outline panel, breadcrumbs navigation, and "Go to Symbol" (Cmd+Shift+O / Ctrl+Shift+O).

Implementation

PR #66690 implements comprehensive Document Symbols support including:

Features

1. Block syntax: @if, @for, @switch, @defer, @let with their expressions
2. Structural directives: *ngIf, *ngFor, *ngSwitch with their expressions
3. Context variables: Loop items, aliases (let i = $index), expression aliases (as alias)
4. Template references: #ref variables
5. HTML elements: With semantically appropriate icons
6. Hybrid approach: Default shows only component classes with templates (configurable)

SymbolKind Mapping

Configuration

{
  // Disable Angular document symbols
  "angular.documentSymbols.enabled": false,
  
  // Show implicit @for variables ($index, $count, etc.)
  "angular.documentSymbols.showImplicitForVariables": true,
  
  // Show all TypeScript symbols (methods, properties)
  "angular.documentSymbols.showTypescriptSymbols": false
}

Default Output (Hybrid Approach)

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

With showTypescriptSymbols: true

MyComponent (class)
├── ngOnInit (method)
├── onClick (method)
├── someProperty (property)
└── (template)
    ├── @if (condition)
    └── <button>

Example

Template:

@for (item of items; track item.id; let i = $index) {
  @if (item.visible; as isVisible) {
    <div #container>{{ item.name }}</div>
  }
}

Outline:

@for (item of items)  📦
├── let item
├── let i
├── @if (item.visible; as isVisible)  🔶
│   ├── let isVisible
│   └── <div>  🟡
│       └── #container

Motivation

• Improved navigation: Quickly jump to any template element
• Better overview: Understand template structure at a glance
• Consistency: Match experience with TypeScript code navigation
• Modern Angular: Full support for new control flow syntax

Labels

• area: language-service
• feature
• vscode-extension