@kbrilla Can you add a demo for how exactly this works?

@kbrilla Can you add a demo for how exactly this works?

What is Linked Editing?

Linked editing (also known as "mirror cursor" or "rename on type") allows you to edit matching HTML tag pairs simultaneously. When you rename an opening tag, the closing tag updates automatically, and vice versa.

How to Enable

Option 1: Always-On (Settings)

Linked editing is enabled by default in VS Code. If it's not working, check your settings:

1. Open VS Code Settings (Cmd+, on macOS or Ctrl+, on Windows/Linux)
2. Search for "linked editing"
3. Ensure "Editor: Linked Editing" is checked (editor.linkedEditing: true)

Alternatively, add to your settings.json:

{
  "editor.linkedEditing": true
}

Option 2: On-Demand (Command)

If you don't want linked editing always active, you can trigger it on-demand:

1. Place your cursor on an HTML tag name
2. Open Command Palette (Cmd+Shift+P on macOS or Ctrl+Shift+P on Windows/Linux)
3. Run "Start Linked Editing"
4. Or use the keyboard shortcut: ⇧⌘F2 (macOS) / Ctrl+Shift+F2 (Windows/Linux)

This temporarily activates linked editing for the current tag pair until you move your cursor away.

How to Use

1. Place your cursor on an HTML tag name in an inline Angular template (within a .ts file)
2. Start typing to rename the tag
3. The corresponding opening/closing tag will update automatically

Example

@Component({
  template: `
    <div class="container">     <!-- Place cursor on "div" here -->
      <span>Hello</span>
    </div>                      <!-- "div" here updates automatically -->
  `
})

Supported Scenarios

Excluded Scenarios

Technical Details

• Uses the LSP textDocument/linkedEditingRange request
• For inline templates: Angular Language Service handles the request
• For external HTML templates: VS Code's built-in HTML Language Support handles it
• Word pattern: [-\w]+ (allows hyphens for custom element names)

Troubleshooting

Linked editing not working in inline templates?

1. Make sure you have the Angular Language Service extension installed and active
2. Check that the file is a TypeScript file with an Angular @Component decorator
3. Ensure your cursor is directly on the tag name (not on < or attributes)
4. Restart the Angular Language Server: Cmd+Shift+P → "Angular: Restart Angular Language server"

Works in HTML but not in TypeScript?

The Angular Language Service specifically handles inline templates. Make sure:

• The extension version includes this feature (v21.0.0+)
• The template is properly defined with template: (not templateUrl:)

@atscott if I could ask for You to review code again as there were issues with not overriding ts implementation of getLinkedEditingRangeAtPosition which i did not catch https://github.com/angular/angular/compare/5d819d40f66ab349fc71fdfdb7fae4c2d65a0430..ee36f64e78ee7cb0a0a4460b53d2a0ddc4682f1b#diff-d101cf9913b0899c7728f93db6b858a1fd05a0605cc0ea14dd97db2dc28a4c28

This PR was merged into the repository. The changes were merged into the following branches:

• main: 8c21866

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}