Angular: Format @content(name) -> @content (name) to align with other block syntax (#19499)

changelog_unreleased/angular/19499.md

@@ -0,0 +1,37 @@
+#### Format `@content(name)` -> `@content (name)` to align with other block syntax (#19499 by @fisker)
+
+<!-- prettier-ignore -->
+```html
+<!-- Input -->
+<FancyButton [label]="title">
+  @content (icon) {
+    <span>Icon!</span>
+  }
+  @content (description) {
+    <span>Description text</span>
+  }
+  <span>Other children</span>
+</FancyButton>
+
+<!-- Prettier stable -->
+<FancyButton [label]="title">
+  @content(icon) {
+    <span>Icon!</span>
+  }
+  @content(description) {
+    <span>Description text</span>
+  }
+  <span>Other children</span>
+</FancyButton>
+
+<!-- Prettier main -->
+<FancyButton [label]="title">
+  @content (icon) {
+    <span>Icon!</span>
+  }
+  @content (description) {
+    <span>Description text</span>
+  }
+  <span>Other children</span>
+</FancyButton>
+```

src/language-html/print/angular-control-flow-block.js

@@ -10,8 +10,6 @@ import { hasPrettierIgnore } from "../utilities/index.js";
 import { ANGULAR_CONTROL_FLOW_BLOCK_SETTINGS } from "./angular-control-flow-block-settings.evaluate.js";
 import { printChildren } from "./children.js";
 
-const blocksShouldNotPrintSpaceAfterName = new Set(["content"]);
-
 function printAngularControlFlowBlock(path, options, print) {
   const { node } = path;
   const docs = [];
@@ -28,12 +26,7 @@ function printAngularControlFlowBlock(path, options, print) {
   }
 
   if (node.parameters) {
-    docs.push(
-      blocksShouldNotPrintSpaceAfterName.has(node.name) ? "" : " ",
-      "(",
-      group(print("parameters")),
-      ")",
-    );
+    docs.push(" ", "(", group(print("parameters")), ")");
   }
 
   if (!isSwitchFallthroughCase(node)) {

tests/format/angular/control-flow/__snapshots__/format.test.js.snap

@@ -90,17 +90,65 @@ parsers: ["angular"]
   <span>Other children</span>
    </FancyButton>
 
+<FancyButton [label]="title">
+      @content (items; let item, index) {
+        <span>#{{index}}: {{item}}</span>
+      }
+    </FancyButton>
+
+<FancyList>
+            @content (renderHeader; let _) {
+              <span>Header Content</span>
+            }
+          </FancyList>
+
+<FancyTable>
+            @content (renderRow; let row, idx, isLast) {
+              <span>{{ idx }} - {{ row }} (Last: {{ isLast }})</span>
+            }
+          </FancyTable>
+
+<DynamicIf [injector]="injector" [cond]="visible">
+            @content (children; let result) {
+              <child>{{ result }}</child>
+            }
+          </DynamicIf>
+
 =====================================output=====================================
 <FancyButton [label]="title">
-  @content(icon) {
+  @content (icon) {
     <span>Icon!</span>
   }
-  @content(description) {
+  @content (description) {
     <span>Description text</span>
   }
   <span>Other children</span>
 </FancyButton>
 
+<FancyButton [label]="title">
+  @content (items; let item, index) {
+    <span>#{{ index }}: {{ item }}</span>
+  }
+</FancyButton>
+
+<FancyList>
+  @content (renderHeader; let _) {
+    <span>Header Content</span>
+  }
+</FancyList>
+
+<FancyTable>
+  @content (renderRow; let row, idx, isLast) {
+    <span>{{ idx }} - {{ row }} (Last: {{ isLast }})</span>
+  }
+</FancyTable>
+
+<DynamicIf [injector]="injector" [cond]="visible">
+  @content (children; let result) {
+    <child>{{ result }}</child>
+  }
+</DynamicIf>
+
 ================================================================================
 `;
 

tests/format/angular/control-flow/content.html

@@ -7,3 +7,27 @@
       }
   <span>Other children</span>
    </FancyButton>
+
+<FancyButton [label]="title">
+      @content (items; let item, index) {
+        <span>#{{index}}: {{item}}</span>
+      }
+    </FancyButton>
+
+<FancyList>
+            @content (renderHeader; let _) {
+              <span>Header Content</span>
+            }
+          </FancyList>
+
+<FancyTable>
+            @content (renderRow; let row, idx, isLast) {
+              <span>{{ idx }} - {{ row }} (Last: {{ isLast }})</span>
+            }
+          </FancyTable>
+
+<DynamicIf [injector]="injector" [cond]="visible">
+            @content (children; let result) {
+              <child>{{ result }}</child>
+            }
+          </DynamicIf>