Angular: avoid breaking inline interpolation closing tags (#20134)

Co-authored-by: fisker <lionkay@gmail.com>

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>
+```

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) ||

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>
+
+================================================================================
+`;

tests/format/angular/inline-interpolation/format.test.js

@@ -0,0 +1 @@
+runFormatTest(import.meta, ["angular"]);

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>