From de9ec361d3e2bb8fbc30da34ceaf402d351b5918 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9C=D0=B0=D0=BA=D1=81=D0=B8=D0=BC=20=D0=98=D0=B2=D0=B0?=
 =?UTF-8?q?=D0=BD=D0=BE=D0=B2?= <omaxphp@yandex.ru>
Date: Wed, 23 Sep 2026 13:08:54 +0300
Subject: [PATCH] Angular: avoid breaking inline interpolation closing tags
 (#20134)

Co-authored-by: fisker <lionkay@gmail.com>
---
 changelog_unreleased/angular/20134.md         | 21 +++++++++++++++
 src/language-html/print/children.js           | 10 +++++++
 .../__snapshots__/format.test.js.snap         | 27 +++++++++++++++++++
 .../inline-interpolation/format.test.js       |  1 +
 .../inline-interpolation/issue-11981.html     |  7 +++++
 5 files changed, 66 insertions(+)
 create mode 100644 changelog_unreleased/angular/20134.md
 create mode 100644 tests/format/angular/inline-interpolation/__snapshots__/format.test.js.snap
 create mode 100644 tests/format/angular/inline-interpolation/format.test.js
 create mode 100644 tests/format/angular/inline-interpolation/issue-11981.html

diff --git a/changelog_unreleased/angular/20134.md b/changelog_unreleased/angular/20134.md
new file mode 100644
index 000000000..87bf13b28
--- /dev/null
+++ b/changelog_unreleased/angular/20134.md
@@ -0,0 +1,21 @@
+#### Avoid breaking inline element closing tags after interpolations (#20134 by @splincode)
+
+<!-- prettier-ignore -->
+```html
+<!-- Input -->
+<div class="text">
+  Sorry, we couldn’t find an account for <b>{{ phoneInput }}</b>, let's create one:
+</div>
+
+<!-- Prettier stable -->
+<div class="text">
+  Sorry, we couldn’t find an account for <b>{{ phoneInput }}</b
+  >, let's create one:
+</div>
+
+<!-- Prettier main -->
+<div class="text">
+  Sorry, we couldn’t find an account for <b>{{ phoneInput }}</b>, let's create
+  one:
+</div>
+```
diff --git a/src/language-html/print/children.js b/src/language-html/print/children.js
index 05cadf7fb..d480b011d 100644
--- a/src/language-html/print/children.js
+++ b/src/language-html/print/children.js
@@ -92,6 +92,16 @@ function printBetweenLine(prevNode, nextNode) {
     return softline;
   }
 
+  if (
+    needsToBorrowPrevClosingTagEndMarker(nextNode) &&
+    prevNode.kind === "element" &&
+    prevNode.children.length === 1 &&
+    prevNode.firstChild.kind === "interpolation" &&
+    prevNode.hasLeadingSpaces
+  ) {
+    return "";
+  }
+
   if (
     (needsToBorrowNextOpeningTagStartMarker(prevNode) &&
       (hasPrettierIgnore(nextNode) ||
diff --git a/tests/format/angular/inline-interpolation/__snapshots__/format.test.js.snap b/tests/format/angular/inline-interpolation/__snapshots__/format.test.js.snap
new file mode 100644
index 000000000..8fcba89e1
--- /dev/null
+++ b/tests/format/angular/inline-interpolation/__snapshots__/format.test.js.snap
@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`issue-11981.html format 1`] = `
+====================================options=====================================
+parsers: ["angular"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+<div class="text">
+  Sorry, we couldn’t find an account for <b>{{ phoneInput }}</b>, let's create one:
+</div>
+<div class="text">
+  Sorry, we couldn’t find an account for <b>{{ phoneInput }}</b
+  >, let's create one:
+</div>
+
+=====================================output=====================================
+<div class="text">
+  Sorry, we couldn’t find an account for <b>{{ phoneInput }}</b>, let's create
+  one:
+</div>
+<div class="text">
+  Sorry, we couldn’t find an account for <b>{{ phoneInput }}</b>, let's create
+  one:
+</div>
+
+================================================================================
+`;
diff --git a/tests/format/angular/inline-interpolation/format.test.js b/tests/format/angular/inline-interpolation/format.test.js
new file mode 100644
index 000000000..8cbc48b1a
--- /dev/null
+++ b/tests/format/angular/inline-interpolation/format.test.js
@@ -0,0 +1 @@
+runFormatTest(import.meta, ["angular"]);
diff --git a/tests/format/angular/inline-interpolation/issue-11981.html b/tests/format/angular/inline-interpolation/issue-11981.html
new file mode 100644
index 000000000..5a139955e
--- /dev/null
+++ b/tests/format/angular/inline-interpolation/issue-11981.html
@@ -0,0 +1,7 @@
+<div class="text">
+  Sorry, we couldn’t find an account for <b>{{ phoneInput }}</b>, let's create one:
+</div>
+<div class="text">
+  Sorry, we couldn’t find an account for <b>{{ phoneInput }}</b
+  >, let's create one:
+</div>