Angular's interpolation wrapped into parentheses breaks control flow formatting

[serhiisol]

Description

Angular's interpolation wrapped into parentheses breaks control flow formatting.
If blank space is inserted between parentheses and interpolation (( {{ tag }} )) issue won't appear.

Input

@if (item.parent) {
  <a [routerLink]="['/items', item.parent.id]">
    {{ item.parent.name }} ({{ item.parent.tag }})
  </a>
} @else {
  <ng-container i18n>No parent assigned</ng-container>
}

Expected Output

@if (item.parent) {
  <a [routerLink]="['/animals', item.parent.id]">
    {{ item.parent.name }} ({{ item.parent.tag }})
  </a>
} @else {
  <ng-container i18n>Parent is not assigned</ng-container>
}

Actual Output

@if (item.parent) {
  <a [routerLink]="['/items', item.parent.id]">
    {{ item.parent.name }} ({{ item.parent.tag }})
  </a>
  } @else {
    <ng-container i18n>No parent assigned</ng-container>
  }

Steps to Reproduce

Environment

OS: macOS 15.3 (24D60)

Settings

VSCode settings:

{
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "html.completion.attributeDefaultValue": "doublequotes",
  "html.format.indentHandlebars": true,
  "html.format.wrapAttributes": "force-expand-multiline",
  // Ignore warning, vscode doesn't allow anything but boolean, but actual extension supports it
  "html.format.templating": [
    "angular"
  ],
}

[jbouchard24]

I have this issue too, but it seems to happen when any character other than space preceeds an interpolation.

Examples that cause the issue

({{ amount }} some text)
{{ numerator }}/{{ denominator }}
{{ firstName }} {{ lastName }}

Examples that do not cause the issue

(some text {{ amount }})
{{ numerator }} / {{ denominator }}
{{ firstName }} {{ lastName }}