From fa6f533e0f3e36b84887ef34e5945f5c4cf2b4e9 Mon Sep 17 00:00:00 2001
From: Ravindu Liyanapathirana <7352580+ravindUwU@users.noreply.github.com>
Date: Tue, 9 Dec 2025 17:17:41 +1100
Subject: [PATCH] Don't print Angular attribute values that are single
 template/string literals, on new lines (#18378)

Co-authored-by: fisker <lionkay@gmail.com>
---
 changelog_unreleased/angular/18378.md         | 30 ++++++++
 src/language-html/embed/utilities.js          |  4 +-
 .../angular/__snapshots__/format.test.js.snap | 24 ++-----
 .../__snapshots__/format.test.js.snap         | 71 +++++++++++++++++++
 .../attribute-value-hugging.html              | 21 ++++++
 .../attribute-value-hugging/format.test.js    |  1 +
 .../vue/vue/__snapshots__/format.test.js.snap | 66 ++++++++++-------
 tests/format/vue/vue/expression-binding.vue   | 12 ++--
 8 files changed, 178 insertions(+), 51 deletions(-)
 create mode 100644 changelog_unreleased/angular/18378.md
 create mode 100644 tests/format/angular/attribute-value-hugging/__snapshots__/format.test.js.snap
 create mode 100644 tests/format/angular/attribute-value-hugging/attribute-value-hugging.html
 create mode 100644 tests/format/angular/attribute-value-hugging/format.test.js

diff --git a/changelog_unreleased/angular/18378.md b/changelog_unreleased/angular/18378.md
new file mode 100644
index 000000000..fcd495b9a
--- /dev/null
+++ b/changelog_unreleased/angular/18378.md
@@ -0,0 +1,30 @@
+#### Don't print Angular attribute values that are single template/string literals, on new lines (#18378 by @ravindUwU)
+
+<!-- prettier-ignore -->
+```html
+<!-- Input -->
+<component
+  [property]="`
+    template
+    literal
+  `"
+/>
+
+<!-- Prettier stable -->
+<component
+  [property]="
+    `
+    template
+    literal
+  `
+  "
+/>
+
+<!-- Prettier main -->
+<component
+  [property]="`
+    template
+    literal
+  `"
+/>
+```
diff --git a/src/language-html/embed/utilities.js b/src/language-html/embed/utilities.js
index 9519ed385..4ff7d8518 100644
--- a/src/language-html/embed/utilities.js
+++ b/src/language-html/embed/utilities.js
@@ -24,7 +24,9 @@ function shouldHugJsExpression(ast, options) {
     (rootNode.type === "ObjectExpression" ||
       rootNode.type === "ArrayExpression" ||
       ((options.parser === "__vue_expression" ||
-        options.parser === "__vue_ts_expression") &&
+        options.parser === "__vue_ts_expression" ||
+        options.parser === "__ng_binding" ||
+        options.parser === "__ng_directive") &&
         (rootNode.type === "TemplateLiteral" ||
           rootNode.type === "StringLiteral")))
   );
diff --git a/tests/format/angular/angular/__snapshots__/format.test.js.snap b/tests/format/angular/angular/__snapshots__/format.test.js.snap
index 574d1e5bd..7156e9d70 100644
--- a/tests/format/angular/angular/__snapshots__/format.test.js.snap
+++ b/tests/format/angular/angular/__snapshots__/format.test.js.snap
@@ -1091,9 +1091,7 @@ printWidth: 1
   [target]="
     1
   "
-  [target]="
-    'hello'
-  "
+  [target]="'hello'"
   [target]="
     a(
       1,
@@ -1330,9 +1328,7 @@ printWidth: 1
   [target]="{
     longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true,
   }"
-  [error]="
-    'We couldn\\\\\\'t find anything with that name.'
-  "
+  [error]="'We couldn\\\\\\'t find anything with that name.'"
   *ngIf="
     form
       .controls
@@ -10074,33 +10070,25 @@ bindon-ngModel
   "
 >
   <app-happy-hero
-    *ngSwitchCase="
-      'happy'
-    "
+    *ngSwitchCase="'happy'"
     [hero]="
       currentHero
     "
   ></app-happy-hero>
   <app-sad-hero
-    *ngSwitchCase="
-      'sad'
-    "
+    *ngSwitchCase="'sad'"
     [hero]="
       currentHero
     "
   ></app-sad-hero>
   <app-confused-hero
-    *ngSwitchCase="
-      'confused'
-    "
+    *ngSwitchCase="'confused'"
     [hero]="
       currentHero
     "
   ></app-confused-hero>
   <div
-    *ngSwitchCase="
-      'confused'
-    "
+    *ngSwitchCase="'confused'"
   >
     Are
     you
diff --git a/tests/format/angular/attribute-value-hugging/__snapshots__/format.test.js.snap b/tests/format/angular/attribute-value-hugging/__snapshots__/format.test.js.snap
new file mode 100644
index 000000000..b5889c9f9
--- /dev/null
+++ b/tests/format/angular/attribute-value-hugging/__snapshots__/format.test.js.snap
@@ -0,0 +1,71 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`attribute-value-hugging.html format 1`] = `
+====================================options=====================================
+parsers: ["angular"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<!-- #17729 -->
+<div
+[foo]="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo} template literal value\`"
+[foo1]="\`\${first} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`
+        +\`\${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`"
+[foo2]="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo +               bar} template literal value\`"
+[string]="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
+[add]="'first loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog' + 'second loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog'"
+[number]="100000000000000000000000000000000000000000000000000000000000000000000000000"
+[shortTemplate]="\`1
+2\`"></div>
+<div
+*foo="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo} template literal value\`"
+*foo1="\`\${first} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`
+        +\`\${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`"
+*foo2="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo +               bar} template literal value\`"
+*string="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
+*add="'first loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog' + 'second loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog'"
+*number="100000000000000000000000000000000000000000000000000000000000000000000000000"
+*shortTemplate="\`1
+2\`"></div>
+
+=====================================output=====================================
+<!-- #17729 -->
+<div
+  [foo]="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo} template literal value\`"
+  [foo1]="
+    \`\${first} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\` +
+    \`\${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`
+  "
+  [foo2]="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo + bar} template literal value\`"
+  [string]="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
+  [add]="
+    'first loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog' +
+    'second loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog'
+  "
+  [number]="
+    100000000000000000000000000000000000000000000000000000000000000000000000000
+  "
+  [shortTemplate]="\`1
+2\`"
+></div>
+<div
+  *foo="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo} template literal value\`"
+  *foo1="
+    \`\${first} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\` +
+    \`\${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`
+  "
+  *foo2="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo + bar} template literal value\`"
+  *string="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
+  *add="
+    'first loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog' +
+    'second loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog'
+  "
+  *number="
+    100000000000000000000000000000000000000000000000000000000000000000000000000
+  "
+  *shortTemplate="\`1
+2\`"
+></div>
+
+================================================================================
+`;
diff --git a/tests/format/angular/attribute-value-hugging/attribute-value-hugging.html b/tests/format/angular/attribute-value-hugging/attribute-value-hugging.html
new file mode 100644
index 000000000..ec6edf56b
--- /dev/null
+++ b/tests/format/angular/attribute-value-hugging/attribute-value-hugging.html
@@ -0,0 +1,21 @@
+<!-- #17729 -->
+<div
+[foo]="`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog ${foo} template literal value`"
+[foo1]="`${first} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog ${template} ${literal}`
+        +`${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog ${template} ${literal}`"
+[foo2]="`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog ${foo +               bar} template literal value`"
+[string]="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
+[add]="'first loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog' + 'second loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog'"
+[number]="100000000000000000000000000000000000000000000000000000000000000000000000000"
+[shortTemplate]="`1
+2`"></div>
+<div
+*foo="`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog ${foo} template literal value`"
+*foo1="`${first} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog ${template} ${literal}`
+        +`${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog ${template} ${literal}`"
+*foo2="`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog ${foo +               bar} template literal value`"
+*string="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
+*add="'first loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog' + 'second loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog'"
+*number="100000000000000000000000000000000000000000000000000000000000000000000000000"
+*shortTemplate="`1
+2`"></div>
diff --git a/tests/format/angular/attribute-value-hugging/format.test.js b/tests/format/angular/attribute-value-hugging/format.test.js
new file mode 100644
index 000000000..8cbc48b1a
--- /dev/null
+++ b/tests/format/angular/attribute-value-hugging/format.test.js
@@ -0,0 +1 @@
+runFormatTest(import.meta, ["angular"]);
diff --git a/tests/format/vue/vue/__snapshots__/format.test.js.snap b/tests/format/vue/vue/__snapshots__/format.test.js.snap
index d60cafd67..cb17b71b5 100644
--- a/tests/format/vue/vue/__snapshots__/format.test.js.snap
+++ b/tests/format/vue/vue/__snapshots__/format.test.js.snap
@@ -1754,12 +1754,14 @@ semi: false
 <template>
 <MyComponent
 :foo="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo} template literal value\`"
-:bar="\`\${first} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`
-+\`\${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`"
-:baz="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo +               bar} template literal value\`"
-:src="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
+:foo1="\`\${first} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`
+        +\`\${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`"
+:foo2="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo +               bar} template literal value\`"
+:string="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
 :add="'first loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog' + 'second loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog'"
-:num="100000000000000000000000000000000000000000000000000000000000000000000000000"
+:number="100000000000000000000000000000000000000000000000000000000000000000000000000"
+:short-template="\`1
+2\`"
 />
 </template>
 
@@ -1768,19 +1770,21 @@ semi: false
 <template>
   <MyComponent
     :foo="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo} template literal value\`"
-    :bar="
+    :foo1="
       \`\${first} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\` +
       \`\${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`
     "
-    :baz="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo + bar} template literal value\`"
-    :src="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
+    :foo2="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo + bar} template literal value\`"
+    :string="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
     :add="
       'first loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog' +
       'second loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog'
     "
-    :num="
+    :number="
       100000000000000000000000000000000000000000000000000000000000000000000000000
     "
+    :short-template="\`1
+2\`"
   />
 </template>
 
@@ -1798,12 +1802,14 @@ trailingComma: "es5"
 <template>
 <MyComponent
 :foo="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo} template literal value\`"
-:bar="\`\${first} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`
-+\`\${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`"
-:baz="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo +               bar} template literal value\`"
-:src="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
+:foo1="\`\${first} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`
+        +\`\${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`"
+:foo2="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo +               bar} template literal value\`"
+:string="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
 :add="'first loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog' + 'second loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog'"
-:num="100000000000000000000000000000000000000000000000000000000000000000000000000"
+:number="100000000000000000000000000000000000000000000000000000000000000000000000000"
+:short-template="\`1
+2\`"
 />
 </template>
 
@@ -1812,19 +1818,21 @@ trailingComma: "es5"
 <template>
   <MyComponent
     :foo="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo} template literal value\`"
-    :bar="
+    :foo1="
       \`\${first} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\` +
       \`\${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`
     "
-    :baz="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo + bar} template literal value\`"
-    :src="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
+    :foo2="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo + bar} template literal value\`"
+    :string="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
     :add="
       'first loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog' +
       'second loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog'
     "
-    :num="
+    :number="
       100000000000000000000000000000000000000000000000000000000000000000000000000
     "
+    :short-template="\`1
+2\`"
   />
 </template>
 
@@ -1842,12 +1850,14 @@ trailingComma: "none"
 <template>
 <MyComponent
 :foo="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo} template literal value\`"
-:bar="\`\${first} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`
-+\`\${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`"
-:baz="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo +               bar} template literal value\`"
-:src="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
+:foo1="\`\${first} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`
+        +\`\${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`"
+:foo2="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo +               bar} template literal value\`"
+:string="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
 :add="'first loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog' + 'second loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog'"
-:num="100000000000000000000000000000000000000000000000000000000000000000000000000"
+:number="100000000000000000000000000000000000000000000000000000000000000000000000000"
+:short-template="\`1
+2\`"
 />
 </template>
 
@@ -1856,19 +1866,21 @@ trailingComma: "none"
 <template>
   <MyComponent
     :foo="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo} template literal value\`"
-    :bar="
+    :foo1="
       \`\${first} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\` +
       \`\${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`
     "
-    :baz="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo + bar} template literal value\`"
-    :src="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
+    :foo2="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo + bar} template literal value\`"
+    :string="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
     :add="
       'first loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog' +
       'second loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog'
     "
-    :num="
+    :number="
       100000000000000000000000000000000000000000000000000000000000000000000000000
     "
+    :short-template="\`1
+2\`"
   />
 </template>
 
diff --git a/tests/format/vue/vue/expression-binding.vue b/tests/format/vue/vue/expression-binding.vue
index e55a4caf6..ae8a9f11c 100644
--- a/tests/format/vue/vue/expression-binding.vue
+++ b/tests/format/vue/vue/expression-binding.vue
@@ -2,11 +2,13 @@
 <template>
 <MyComponent
 :foo="`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog ${foo} template literal value`"
-:bar="`${first} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog ${template} ${literal}`
-+`${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog ${template} ${literal}`"
-:baz="`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog ${foo +               bar} template literal value`"
-:src="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
+:foo1="`${first} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog ${template} ${literal}`
+        +`${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog ${template} ${literal}`"
+:foo2="`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog ${foo +               bar} template literal value`"
+:string="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
 :add="'first loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog' + 'second loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog'"
-:num="100000000000000000000000000000000000000000000000000000000000000000000000000"
+:number="100000000000000000000000000000000000000000000000000000000000000000000000000"
+:short-template="`1
+2`"
 />
 </template>