From fcb66949c94174fa5c476d1dc3cb52a88fd1b28d Mon Sep 17 00:00:00 2001
From: Alex Inkin <alexander@inkin.ru>
Date: Mon, 3 Jul 2023 01:28:17 +0800
Subject: [PATCH] Remove space after pipe name (#14961)

* Remove space after pipe name

* Add changelog

* Update changelog

* Update changelog

---------

Co-authored-by: Sosuke Suzuki <sosuke.suzuki@dr-ubie.com>
---
 changelog_unreleased/angular/14961.md         |  25 ++
 src/language-js/print/binaryish.js            |   2 +-
 .../angular/__snapshots__/jsfmt.spec.js.snap  | 412 +++++++++---------
 .../angular/angular/attributes.component.html |   8 +-
 .../angular/ignore-attribute.component.html   |  24 +-
 .../angular/interpolation.component.html      |   2 +-
 .../__snapshots__/jsfmt.spec.js.snap          |  12 +-
 .../__snapshots__/jsfmt.spec.js.snap          |  12 +-
 8 files changed, 272 insertions(+), 225 deletions(-)
 create mode 100644 changelog_unreleased/angular/14961.md

diff --git a/changelog_unreleased/angular/14961.md b/changelog_unreleased/angular/14961.md
new file mode 100644
index 000000000..f0af0a33c
--- /dev/null
+++ b/changelog_unreleased/angular/14961.md
@@ -0,0 +1,25 @@
+#### Remove space after pipe name (#14961 by @waterplea)
+
+We introduced [a new format for pipe in Prettier 2.8](https://prettier.io/blog/2022/11/23/2.8.0.html#insert-spaces-in-pipe-13100httpsgithubcomprettierprettierpull13100-by-sosukesuzukihttpsgithubcomsosukesuzuki), but this was not accepted by the community.
+
+Therefore, we are introducing a new format that reflects community input.
+
+For more information on the discussion, please see https://github.com/prettier/prettier/issues/13887.
+
+<!-- prettier-ignore -->
+```html
+<!-- Input -->
+<my-component
+  [value]="value | transform: arg1 : arg2 | format: arg3 : arg4"
+></my-component>
+
+<!-- Prettier stable -->
+<my-component
+  [value]="value | transform : arg1 : arg2 | format : arg3 : arg4"
+></my-component>
+
+<!-- Prettier main -->
+<my-component
+  [value]="value | transform: arg1 : arg2 | format: arg3 : arg4"
+></my-component>
+```
diff --git a/src/language-js/print/binaryish.js b/src/language-js/print/binaryish.js
index 7091e9711..2fd890a52 100644
--- a/src/language-js/print/binaryish.js
+++ b/src/language-js/print/binaryish.js
@@ -237,7 +237,7 @@ function printBinaryishExpressions(
     node.type === "NGPipeExpression" && node.arguments.length > 0
       ? group(
           indent([
-            line,
+            softline,
             ": ",
             join(
               [line, ": "],
diff --git a/tests/format/angular/angular/__snapshots__/jsfmt.spec.js.snap b/tests/format/angular/angular/__snapshots__/jsfmt.spec.js.snap
index c6fe89f66..38236d5de 100644
--- a/tests/format/angular/angular/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/format/angular/angular/__snapshots__/jsfmt.spec.js.snap
@@ -320,10 +320,10 @@ printWidth: 80
                                                                                 | printWidth
 =====================================input======================================
 <div
-    bindon-target=" a | b : c "
-    [(target)]=" a | b : c "
-    bind-target=" a | b : c "
-    [target]=" a | b : c "
+    bindon-target=" a | b : c:d :e "
+    [(target)]=" a | b : c:d :e "
+    bind-target=" a | b : c:d :e "
+    [target]=" a | b : c:d :e "
     [target]=" a | pipe   "
     [target]=" 0 - 1 "
     [target]=" - 1 "
@@ -436,10 +436,10 @@ printWidth: 80
 
 =====================================output=====================================
 <div
-  bindon-target="a | b : c"
-  [(target)]="a | b : c"
-  bind-target="a | b : c"
-  [target]="a | b : c"
+  bindon-target="a | b: c : d : e"
+  [(target)]="a | b: c : d : e"
+  bind-target="a | b: c : d : e"
+  [target]="a | b: c : d : e"
   [target]="a | pipe"
   [target]="0 - 1"
   [target]="-1"
@@ -599,10 +599,10 @@ printWidth: 80
                                                                                 | printWidth
 =====================================input======================================
 <div
-    bindon-target=" a | b : c "
-    [(target)]=" a | b : c "
-    bind-target=" a | b : c "
-    [target]=" a | b : c "
+    bindon-target=" a | b : c:d :e "
+    [(target)]=" a | b : c:d :e "
+    bind-target=" a | b : c:d :e "
+    [target]=" a | b : c:d :e "
     [target]=" a | pipe   "
     [target]=" 0 - 1 "
     [target]=" - 1 "
@@ -715,10 +715,10 @@ printWidth: 80
 
 =====================================output=====================================
 <div
-  bindon-target="a | b : c"
-  [(target)]="a | b : c"
-  bind-target="a | b : c"
-  [target]="a | b : c"
+  bindon-target="a | b: c : d : e"
+  [(target)]="a | b: c : d : e"
+  bind-target="a | b: c : d : e"
+  [target]="a | b: c : d : e"
   [target]="a | pipe"
   [target]="0 - 1"
   [target]="-1"
@@ -877,10 +877,10 @@ printWidth: 1
  | printWidth
 =====================================input======================================
 <div
-    bindon-target=" a | b : c "
-    [(target)]=" a | b : c "
-    bind-target=" a | b : c "
-    [target]=" a | b : c "
+    bindon-target=" a | b : c:d :e "
+    [(target)]=" a | b : c:d :e "
+    bind-target=" a | b : c:d :e "
+    [target]=" a | b : c:d :e "
     [target]=" a | pipe   "
     [target]=" 0 - 1 "
     [target]=" - 1 "
@@ -997,21 +997,29 @@ printWidth: 1
     a
       | b
         : c
+        : d
+        : e
   "
   [(target)]="
     a
       | b
         : c
+        : d
+        : e
   "
   bind-target="
     a
       | b
         : c
+        : d
+        : e
   "
   [target]="
     a
       | b
         : c
+        : d
+        : e
   "
   [target]="
     a
@@ -1496,10 +1504,10 @@ trailingComma: "es5"
                                                                                 | printWidth
 =====================================input======================================
 <div
-    bindon-target=" a | b : c "
-    [(target)]=" a | b : c "
-    bind-target=" a | b : c "
-    [target]=" a | b : c "
+    bindon-target=" a | b : c:d :e "
+    [(target)]=" a | b : c:d :e "
+    bind-target=" a | b : c:d :e "
+    [target]=" a | b : c:d :e "
     [target]=" a | pipe   "
     [target]=" 0 - 1 "
     [target]=" - 1 "
@@ -1612,10 +1620,10 @@ trailingComma: "es5"
 
 =====================================output=====================================
 <div
-  bindon-target="a | b : c"
-  [(target)]="a | b : c"
-  bind-target="a | b : c"
-  [target]="a | b : c"
+  bindon-target="a | b: c : d : e"
+  [(target)]="a | b: c : d : e"
+  bind-target="a | b: c : d : e"
+  [target]="a | b: c : d : e"
   [target]="a | pipe"
   [target]="0 - 1"
   [target]="-1"
@@ -1775,10 +1783,10 @@ trailingComma: "none"
                                                                                 | printWidth
 =====================================input======================================
 <div
-    bindon-target=" a | b : c "
-    [(target)]=" a | b : c "
-    bind-target=" a | b : c "
-    [target]=" a | b : c "
+    bindon-target=" a | b : c:d :e "
+    [(target)]=" a | b : c:d :e "
+    bind-target=" a | b : c:d :e "
+    [target]=" a | b : c:d :e "
     [target]=" a | pipe   "
     [target]=" 0 - 1 "
     [target]=" - 1 "
@@ -1891,10 +1899,10 @@ trailingComma: "none"
 
 =====================================output=====================================
 <div
-  bindon-target="a | b : c"
-  [(target)]="a | b : c"
-  bind-target="a | b : c"
-  [target]="a | b : c"
+  bindon-target="a | b: c : d : e"
+  [(target)]="a | b: c : d : e"
+  bind-target="a | b: c : d : e"
+  [target]="a | b: c : d : e"
   [target]="a | pipe"
   [target]="0 - 1"
   [target]="-1"
@@ -2598,52 +2606,52 @@ printWidth: 80
                                                                                 | printWidth
 =====================================input======================================
 <div
-    bindon-target=" a | b : c "
-    [(target)]=" a | b : c "
-    bind-target=" a | b : c "
+  bindon-target=" a | b : c:d :e "
+  [(target)]=" a | b : c:d :e "
+  bind-target=" a | b : c:d :e "
 ></div>
 <!--  prettier-ignore-attribute -->
 <div
-    bindon-target=" a | b : c "
-    [(target)]=" a | b : c "
-    bind-target=" a | b : c "
+  bindon-target=" a | b : c:d :e "
+  [(target)]=" a | b : c:d :e "
+  bind-target=" a | b : c:d :e "
 ></div>
 <!--  prettier-ignore-attribute bind-target -->
 <div
-    bindon-target=" a | b : c "
-    [(target)]=" a | b : c "
-    bind-target=" a | b : c "
+  bindon-target=" a | b : c:d :e "
+  [(target)]=" a | b : c:d :e "
+  bind-target=" a | b : c:d :e "
 ></div>
 <!--  prettier-ignore-attribute [(target)] bind-target -->
 <div
-    bindon-target=" a | b : c "
-    [(target)]=" a | b : c "
-    bind-target=" a | b : c "
+  bindon-target=" a | b : c:d :e "
+  [(target)]=" a | b : c:d :e "
+  bind-target=" a | b : c:d :e "
 ></div>
 
 =====================================output=====================================
 <div
-  bindon-target="a | b : c"
-  [(target)]="a | b : c"
-  bind-target="a | b : c"
+  bindon-target="a | b: c : d : e"
+  [(target)]="a | b: c : d : e"
+  bind-target="a | b: c : d : e"
 ></div>
 <!--  prettier-ignore-attribute -->
 <div
-  bindon-target=" a | b : c "
-  [(target)]=" a | b : c "
-  bind-target=" a | b : c "
+  bindon-target=" a | b : c:d :e "
+  [(target)]=" a | b : c:d :e "
+  bind-target=" a | b : c:d :e "
 ></div>
 <!--  prettier-ignore-attribute bind-target -->
 <div
-  bindon-target="a | b : c"
-  [(target)]="a | b : c"
-  bind-target=" a | b : c "
+  bindon-target="a | b: c : d : e"
+  [(target)]="a | b: c : d : e"
+  bind-target=" a | b : c:d :e "
 ></div>
 <!--  prettier-ignore-attribute [(target)] bind-target -->
 <div
-  bindon-target="a | b : c"
-  [(target)]=" a | b : c "
-  bind-target=" a | b : c "
+  bindon-target="a | b: c : d : e"
+  [(target)]=" a | b : c:d :e "
+  bind-target=" a | b : c:d :e "
 ></div>
 
 ================================================================================
@@ -2657,52 +2665,52 @@ printWidth: 80
                                                                                 | printWidth
 =====================================input======================================
 <div
-    bindon-target=" a | b : c "
-    [(target)]=" a | b : c "
-    bind-target=" a | b : c "
+  bindon-target=" a | b : c:d :e "
+  [(target)]=" a | b : c:d :e "
+  bind-target=" a | b : c:d :e "
 ></div>
 <!--  prettier-ignore-attribute -->
 <div
-    bindon-target=" a | b : c "
-    [(target)]=" a | b : c "
-    bind-target=" a | b : c "
+  bindon-target=" a | b : c:d :e "
+  [(target)]=" a | b : c:d :e "
+  bind-target=" a | b : c:d :e "
 ></div>
 <!--  prettier-ignore-attribute bind-target -->
 <div
-    bindon-target=" a | b : c "
-    [(target)]=" a | b : c "
-    bind-target=" a | b : c "
+  bindon-target=" a | b : c:d :e "
+  [(target)]=" a | b : c:d :e "
+  bind-target=" a | b : c:d :e "
 ></div>
 <!--  prettier-ignore-attribute [(target)] bind-target -->
 <div
-    bindon-target=" a | b : c "
-    [(target)]=" a | b : c "
-    bind-target=" a | b : c "
+  bindon-target=" a | b : c:d :e "
+  [(target)]=" a | b : c:d :e "
+  bind-target=" a | b : c:d :e "
 ></div>
 
 =====================================output=====================================
 <div
-  bindon-target="a | b : c"
-  [(target)]="a | b : c"
-  bind-target="a | b : c"
+  bindon-target="a | b: c : d : e"
+  [(target)]="a | b: c : d : e"
+  bind-target="a | b: c : d : e"
 ></div>
 <!--  prettier-ignore-attribute -->
 <div
-  bindon-target=" a | b : c "
-  [(target)]=" a | b : c "
-  bind-target=" a | b : c "
+  bindon-target=" a | b : c:d :e "
+  [(target)]=" a | b : c:d :e "
+  bind-target=" a | b : c:d :e "
 ></div>
 <!--  prettier-ignore-attribute bind-target -->
 <div
-  bindon-target="a | b : c"
-  [(target)]="a | b : c"
-  bind-target=" a | b : c "
+  bindon-target="a | b: c : d : e"
+  [(target)]="a | b: c : d : e"
+  bind-target=" a | b : c:d :e "
 ></div>
 <!--  prettier-ignore-attribute [(target)] bind-target -->
 <div
-  bindon-target="a | b : c"
-  [(target)]=" a | b : c "
-  bind-target=" a | b : c "
+  bindon-target="a | b: c : d : e"
+  [(target)]=" a | b : c:d :e "
+  bind-target=" a | b : c:d :e "
 ></div>
 
 ================================================================================
@@ -2715,27 +2723,27 @@ printWidth: 1
  | printWidth
 =====================================input======================================
 <div
-    bindon-target=" a | b : c "
-    [(target)]=" a | b : c "
-    bind-target=" a | b : c "
+  bindon-target=" a | b : c:d :e "
+  [(target)]=" a | b : c:d :e "
+  bind-target=" a | b : c:d :e "
 ></div>
 <!--  prettier-ignore-attribute -->
 <div
-    bindon-target=" a | b : c "
-    [(target)]=" a | b : c "
-    bind-target=" a | b : c "
+  bindon-target=" a | b : c:d :e "
+  [(target)]=" a | b : c:d :e "
+  bind-target=" a | b : c:d :e "
 ></div>
 <!--  prettier-ignore-attribute bind-target -->
 <div
-    bindon-target=" a | b : c "
-    [(target)]=" a | b : c "
-    bind-target=" a | b : c "
+  bindon-target=" a | b : c:d :e "
+  [(target)]=" a | b : c:d :e "
+  bind-target=" a | b : c:d :e "
 ></div>
 <!--  prettier-ignore-attribute [(target)] bind-target -->
 <div
-    bindon-target=" a | b : c "
-    [(target)]=" a | b : c "
-    bind-target=" a | b : c "
+  bindon-target=" a | b : c:d :e "
+  [(target)]=" a | b : c:d :e "
+  bind-target=" a | b : c:d :e "
 ></div>
 
 =====================================output=====================================
@@ -2744,23 +2752,29 @@ printWidth: 1
     a
       | b
         : c
+        : d
+        : e
   "
   [(target)]="
     a
       | b
         : c
+        : d
+        : e
   "
   bind-target="
     a
       | b
         : c
+        : d
+        : e
   "
 ></div>
 <!--  prettier-ignore-attribute -->
 <div
-  bindon-target=" a | b : c "
-  [(target)]=" a | b : c "
-  bind-target=" a | b : c "
+  bindon-target=" a | b : c:d :e "
+  [(target)]=" a | b : c:d :e "
+  bind-target=" a | b : c:d :e "
 ></div>
 <!--  prettier-ignore-attribute bind-target -->
 <div
@@ -2768,13 +2782,17 @@ printWidth: 1
     a
       | b
         : c
+        : d
+        : e
   "
   [(target)]="
     a
       | b
         : c
+        : d
+        : e
   "
-  bind-target=" a | b : c "
+  bind-target=" a | b : c:d :e "
 ></div>
 <!--  prettier-ignore-attribute [(target)] bind-target -->
 <div
@@ -2782,9 +2800,11 @@ printWidth: 1
     a
       | b
         : c
+        : d
+        : e
   "
-  [(target)]=" a | b : c "
-  bind-target=" a | b : c "
+  [(target)]=" a | b : c:d :e "
+  bind-target=" a | b : c:d :e "
 ></div>
 
 ================================================================================
@@ -2798,52 +2818,52 @@ trailingComma: "es5"
                                                                                 | printWidth
 =====================================input======================================
 <div
-    bindon-target=" a | b : c "
-    [(target)]=" a | b : c "
-    bind-target=" a | b : c "
+  bindon-target=" a | b : c:d :e "
+  [(target)]=" a | b : c:d :e "
+  bind-target=" a | b : c:d :e "
 ></div>
 <!--  prettier-ignore-attribute -->
 <div
-    bindon-target=" a | b : c "
-    [(target)]=" a | b : c "
-    bind-target=" a | b : c "
+  bindon-target=" a | b : c:d :e "
+  [(target)]=" a | b : c:d :e "
+  bind-target=" a | b : c:d :e "
 ></div>
 <!--  prettier-ignore-attribute bind-target -->
 <div
-    bindon-target=" a | b : c "
-    [(target)]=" a | b : c "
-    bind-target=" a | b : c "
+  bindon-target=" a | b : c:d :e "
+  [(target)]=" a | b : c:d :e "
+  bind-target=" a | b : c:d :e "
 ></div>
 <!--  prettier-ignore-attribute [(target)] bind-target -->
 <div
-    bindon-target=" a | b : c "
-    [(target)]=" a | b : c "
-    bind-target=" a | b : c "
+  bindon-target=" a | b : c:d :e "
+  [(target)]=" a | b : c:d :e "
+  bind-target=" a | b : c:d :e "
 ></div>
 
 =====================================output=====================================
 <div
-  bindon-target="a | b : c"
-  [(target)]="a | b : c"
-  bind-target="a | b : c"
+  bindon-target="a | b: c : d : e"
+  [(target)]="a | b: c : d : e"
+  bind-target="a | b: c : d : e"
 ></div>
 <!--  prettier-ignore-attribute -->
 <div
-  bindon-target=" a | b : c "
-  [(target)]=" a | b : c "
-  bind-target=" a | b : c "
+  bindon-target=" a | b : c:d :e "
+  [(target)]=" a | b : c:d :e "
+  bind-target=" a | b : c:d :e "
 ></div>
 <!--  prettier-ignore-attribute bind-target -->
 <div
-  bindon-target="a | b : c"
-  [(target)]="a | b : c"
-  bind-target=" a | b : c "
+  bindon-target="a | b: c : d : e"
+  [(target)]="a | b: c : d : e"
+  bind-target=" a | b : c:d :e "
 ></div>
 <!--  prettier-ignore-attribute [(target)] bind-target -->
 <div
-  bindon-target="a | b : c"
-  [(target)]=" a | b : c "
-  bind-target=" a | b : c "
+  bindon-target="a | b: c : d : e"
+  [(target)]=" a | b : c:d :e "
+  bind-target=" a | b : c:d :e "
 ></div>
 
 ================================================================================
@@ -2857,52 +2877,52 @@ trailingComma: "none"
                                                                                 | printWidth
 =====================================input======================================
 <div
-    bindon-target=" a | b : c "
-    [(target)]=" a | b : c "
-    bind-target=" a | b : c "
+  bindon-target=" a | b : c:d :e "
+  [(target)]=" a | b : c:d :e "
+  bind-target=" a | b : c:d :e "
 ></div>
 <!--  prettier-ignore-attribute -->
 <div
-    bindon-target=" a | b : c "
-    [(target)]=" a | b : c "
-    bind-target=" a | b : c "
+  bindon-target=" a | b : c:d :e "
+  [(target)]=" a | b : c:d :e "
+  bind-target=" a | b : c:d :e "
 ></div>
 <!--  prettier-ignore-attribute bind-target -->
 <div
-    bindon-target=" a | b : c "
-    [(target)]=" a | b : c "
-    bind-target=" a | b : c "
+  bindon-target=" a | b : c:d :e "
+  [(target)]=" a | b : c:d :e "
+  bind-target=" a | b : c:d :e "
 ></div>
 <!--  prettier-ignore-attribute [(target)] bind-target -->
 <div
-    bindon-target=" a | b : c "
-    [(target)]=" a | b : c "
-    bind-target=" a | b : c "
+  bindon-target=" a | b : c:d :e "
+  [(target)]=" a | b : c:d :e "
+  bind-target=" a | b : c:d :e "
 ></div>
 
 =====================================output=====================================
 <div
-  bindon-target="a | b : c"
-  [(target)]="a | b : c"
-  bind-target="a | b : c"
+  bindon-target="a | b: c : d : e"
+  [(target)]="a | b: c : d : e"
+  bind-target="a | b: c : d : e"
 ></div>
 <!--  prettier-ignore-attribute -->
 <div
-  bindon-target=" a | b : c "
-  [(target)]=" a | b : c "
-  bind-target=" a | b : c "
+  bindon-target=" a | b : c:d :e "
+  [(target)]=" a | b : c:d :e "
+  bind-target=" a | b : c:d :e "
 ></div>
 <!--  prettier-ignore-attribute bind-target -->
 <div
-  bindon-target="a | b : c"
-  [(target)]="a | b : c"
-  bind-target=" a | b : c "
+  bindon-target="a | b: c : d : e"
+  [(target)]="a | b: c : d : e"
+  bind-target=" a | b : c:d :e "
 ></div>
 <!--  prettier-ignore-attribute [(target)] bind-target -->
 <div
-  bindon-target="a | b : c"
-  [(target)]=" a | b : c "
-  bind-target=" a | b : c "
+  bindon-target="a | b: c : d : e"
+  [(target)]=" a | b : c:d :e "
+  bind-target=" a | b : c:d :e "
 ></div>
 
 ================================================================================
@@ -2915,7 +2935,7 @@ parsers: ["angular"]
 printWidth: 80
                                                                                 | printWidth
 =====================================input======================================
-<div>{{ a | b : c }}</div>
+<div>{{ a | b : c:d :e }}</div>
 <div>{{  a | pipe    }}</div>
 <div>{{ 0 - 1 }}</div>
 <div>{{ - 1 }}</div>
@@ -2984,7 +3004,7 @@ printWidth: 80
 <p>{{ {a:a?b:{} } }}</p>
 
 =====================================output=====================================
-<div>{{ a | b : c }}</div>
+<div>{{ a | b: c : d : e }}</div>
 <div>{{ a | pipe }}</div>
 <div>{{ 0 - 1 }}</div>
 <div>{{ -1 }}</div>
@@ -3013,31 +3033,31 @@ printWidth: 80
 <div>{{ a // hello }}</div>
 <label for="transmissionLayoutRadioButton">{{
   "SearchSelection.transmissionLayoutRadioButton"
-    | localize : localizationSection
+    | localize: localizationSection
 }}</label>
 <label
   for="transmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButton"
   >{{
     "SearchSelection.transmissionLayoutRadioButton"
-      | localize : localizationSection
+      | localize: localizationSection
   }}</label
 >
 <label for="transmissionLayoutRadioButton"
   >{{
     "SearchSelection.transmissionLayoutRadioButton"
-      | localize : localizationSection
+      | localize: localizationSection
   }}
 </label>
 <label for="transmissionLayoutRadioButton">
   {{
     "SearchSelection.transmissionLayoutRadioButton"
-      | localize : localizationSection
+      | localize: localizationSection
   }}</label
 >
 <label for="transmissionLayoutRadioButton">
   {{
     "SearchSelection.transmissionLayoutRadioButton"
-      | localize : localizationSection
+      | localize: localizationSection
   }}
 </label>
 <div class="Nemo possimus non voluptates dicta accusamus id quia">
@@ -3064,7 +3084,7 @@ printWidth: 80
 <p>
   {{
     "delete"
-      | translate : {what: ("entities" | translate : ({count: array.length}))}
+      | translate: {what: ("entities" | translate: ({count: array.length}))}
   }}
 </p>
 <p>{{ {a: 1 + ({})} }}</p>
@@ -3082,7 +3102,7 @@ parsers: ["angular"]
 printWidth: 80
                                                                                 | printWidth
 =====================================input======================================
-<div>{{ a | b : c }}</div>
+<div>{{ a | b : c:d :e }}</div>
 <div>{{  a | pipe    }}</div>
 <div>{{ 0 - 1 }}</div>
 <div>{{ - 1 }}</div>
@@ -3151,7 +3171,7 @@ printWidth: 80
 <p>{{ {a:a?b:{} } }}</p>
 
 =====================================output=====================================
-<div>{{ a | b : c }}</div>
+<div>{{ a | b: c : d : e }}</div>
 <div>{{ a | pipe }}</div>
 <div>{{ 0 - 1 }}</div>
 <div>{{ -1 }}</div>
@@ -3181,7 +3201,7 @@ printWidth: 80
 <label for="transmissionLayoutRadioButton">
   {{
     "SearchSelection.transmissionLayoutRadioButton"
-      | localize : localizationSection
+      | localize: localizationSection
   }}
 </label>
 <label
@@ -3189,25 +3209,25 @@ printWidth: 80
 >
   {{
     "SearchSelection.transmissionLayoutRadioButton"
-      | localize : localizationSection
+      | localize: localizationSection
   }}
 </label>
 <label for="transmissionLayoutRadioButton">
   {{
     "SearchSelection.transmissionLayoutRadioButton"
-      | localize : localizationSection
+      | localize: localizationSection
   }}
 </label>
 <label for="transmissionLayoutRadioButton">
   {{
     "SearchSelection.transmissionLayoutRadioButton"
-      | localize : localizationSection
+      | localize: localizationSection
   }}
 </label>
 <label for="transmissionLayoutRadioButton">
   {{
     "SearchSelection.transmissionLayoutRadioButton"
-      | localize : localizationSection
+      | localize: localizationSection
   }}
 </label>
 <div class="Nemo possimus non voluptates dicta accusamus id quia">
@@ -3236,7 +3256,7 @@ printWidth: 80
 <p>
   {{
     "delete"
-      | translate : { what: ("entities" | translate : { count: array.length }) }
+      | translate: { what: ("entities" | translate: { count: array.length }) }
   }}
 </p>
 <p>{{ { a: 1 + {} } }}</p>
@@ -3253,7 +3273,7 @@ parsers: ["angular"]
 printWidth: 1
  | printWidth
 =====================================input======================================
-<div>{{ a | b : c }}</div>
+<div>{{ a | b : c:d :e }}</div>
 <div>{{  a | pipe    }}</div>
 <div>{{ 0 - 1 }}</div>
 <div>{{ - 1 }}</div>
@@ -3327,6 +3347,8 @@ printWidth: 1
     a
       | b
         : c
+        : d
+        : e
   }}
 </div>
 <div>
@@ -3626,7 +3648,7 @@ printWidth: 80
 trailingComma: "es5"
                                                                                 | printWidth
 =====================================input======================================
-<div>{{ a | b : c }}</div>
+<div>{{ a | b : c:d :e }}</div>
 <div>{{  a | pipe    }}</div>
 <div>{{ 0 - 1 }}</div>
 <div>{{ - 1 }}</div>
@@ -3695,7 +3717,7 @@ trailingComma: "es5"
 <p>{{ {a:a?b:{} } }}</p>
 
 =====================================output=====================================
-<div>{{ a | b : c }}</div>
+<div>{{ a | b: c : d : e }}</div>
 <div>{{ a | pipe }}</div>
 <div>{{ 0 - 1 }}</div>
 <div>{{ -1 }}</div>
@@ -3724,31 +3746,31 @@ trailingComma: "es5"
 <div>{{ a // hello }}</div>
 <label for="transmissionLayoutRadioButton">{{
   "SearchSelection.transmissionLayoutRadioButton"
-    | localize : localizationSection
+    | localize: localizationSection
 }}</label>
 <label
   for="transmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButton"
   >{{
     "SearchSelection.transmissionLayoutRadioButton"
-      | localize : localizationSection
+      | localize: localizationSection
   }}</label
 >
 <label for="transmissionLayoutRadioButton"
   >{{
     "SearchSelection.transmissionLayoutRadioButton"
-      | localize : localizationSection
+      | localize: localizationSection
   }}
 </label>
 <label for="transmissionLayoutRadioButton">
   {{
     "SearchSelection.transmissionLayoutRadioButton"
-      | localize : localizationSection
+      | localize: localizationSection
   }}</label
 >
 <label for="transmissionLayoutRadioButton">
   {{
     "SearchSelection.transmissionLayoutRadioButton"
-      | localize : localizationSection
+      | localize: localizationSection
   }}
 </label>
 <div class="Nemo possimus non voluptates dicta accusamus id quia">
@@ -3775,7 +3797,7 @@ trailingComma: "es5"
 <p>
   {{
     "delete"
-      | translate : { what: ("entities" | translate : { count: array.length }) }
+      | translate: { what: ("entities" | translate: { count: array.length }) }
   }}
 </p>
 <p>{{ { a: 1 + {} } }}</p>
@@ -3793,7 +3815,7 @@ printWidth: 80
 trailingComma: "none"
                                                                                 | printWidth
 =====================================input======================================
-<div>{{ a | b : c }}</div>
+<div>{{ a | b : c:d :e }}</div>
 <div>{{  a | pipe    }}</div>
 <div>{{ 0 - 1 }}</div>
 <div>{{ - 1 }}</div>
@@ -3862,7 +3884,7 @@ trailingComma: "none"
 <p>{{ {a:a?b:{} } }}</p>
 
 =====================================output=====================================
-<div>{{ a | b : c }}</div>
+<div>{{ a | b: c : d : e }}</div>
 <div>{{ a | pipe }}</div>
 <div>{{ 0 - 1 }}</div>
 <div>{{ -1 }}</div>
@@ -3891,31 +3913,31 @@ trailingComma: "none"
 <div>{{ a // hello }}</div>
 <label for="transmissionLayoutRadioButton">{{
   "SearchSelection.transmissionLayoutRadioButton"
-    | localize : localizationSection
+    | localize: localizationSection
 }}</label>
 <label
   for="transmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButtontransmissionLayoutRadioButton"
   >{{
     "SearchSelection.transmissionLayoutRadioButton"
-      | localize : localizationSection
+      | localize: localizationSection
   }}</label
 >
 <label for="transmissionLayoutRadioButton"
   >{{
     "SearchSelection.transmissionLayoutRadioButton"
-      | localize : localizationSection
+      | localize: localizationSection
   }}
 </label>
 <label for="transmissionLayoutRadioButton">
   {{
     "SearchSelection.transmissionLayoutRadioButton"
-      | localize : localizationSection
+      | localize: localizationSection
   }}</label
 >
 <label for="transmissionLayoutRadioButton">
   {{
     "SearchSelection.transmissionLayoutRadioButton"
-      | localize : localizationSection
+      | localize: localizationSection
   }}
 </label>
 <div class="Nemo possimus non voluptates dicta accusamus id quia">
@@ -3942,7 +3964,7 @@ trailingComma: "none"
 <p>
   {{
     "delete"
-      | translate : { what: ("entities" | translate : { count: array.length }) }
+      | translate: { what: ("entities" | translate: { count: array.length }) }
   }}
 </p>
 <p>{{ { a: 1 + {} } }}</p>
@@ -5359,17 +5381,17 @@ bindon-ngModel
 </div>
 
 <!-- pipe with configuration argument => "February 25, 1970" -->
-<div>Birthdate: {{ currentHero?.birthdate | date : "longDate" }}</div>
+<div>Birthdate: {{ currentHero?.birthdate | date: "longDate" }}</div>
 
 <div>{{ currentHero | json }}</div>
 
 <div>
-  Birthdate: {{ currentHero?.birthdate | date : "longDate" | uppercase }}
+  Birthdate: {{ currentHero?.birthdate | date: "longDate" | uppercase }}
 </div>
 
 <div>
   <!-- pipe price to USD and display the $ symbol -->
-  <label>Price: </label>{{ product.price | currency : "USD" : true }}
+  <label>Price: </label>{{ product.price | currency: "USD" : true }}
 </div>
 
 <a class="to-toc" href="#toc">top</a>
@@ -7011,18 +7033,18 @@ bindon-ngModel
 </div>
 
 <!-- pipe with configuration argument => "February 25, 1970" -->
-<div>Birthdate: {{ currentHero?.birthdate | date : "longDate" }}</div>
+<div>Birthdate: {{ currentHero?.birthdate | date: "longDate" }}</div>
 
 <div>{{ currentHero | json }}</div>
 
 <div>
-  Birthdate: {{ currentHero?.birthdate | date : "longDate" | uppercase }}
+  Birthdate: {{ currentHero?.birthdate | date: "longDate" | uppercase }}
 </div>
 
 <div>
   <!-- pipe price to USD and display the $ symbol -->
   <label>Price:</label>
-  {{ product.price | currency : "USD" : true }}
+  {{ product.price | currency: "USD" : true }}
 </div>
 
 <a class="to-toc" href="#toc">top</a>
@@ -11974,17 +11996,17 @@ bindon-ngModel
 </div>
 
 <!-- pipe with configuration argument => "February 25, 1970" -->
-<div>Birthdate: {{ currentHero?.birthdate | date : "longDate" }}</div>
+<div>Birthdate: {{ currentHero?.birthdate | date: "longDate" }}</div>
 
 <div>{{ currentHero | json }}</div>
 
 <div>
-  Birthdate: {{ currentHero?.birthdate | date : "longDate" | uppercase }}
+  Birthdate: {{ currentHero?.birthdate | date: "longDate" | uppercase }}
 </div>
 
 <div>
   <!-- pipe price to USD and display the $ symbol -->
-  <label>Price: </label>{{ product.price | currency : "USD" : true }}
+  <label>Price: </label>{{ product.price | currency: "USD" : true }}
 </div>
 
 <a class="to-toc" href="#toc">top</a>
@@ -13501,17 +13523,17 @@ bindon-ngModel
 </div>
 
 <!-- pipe with configuration argument => "February 25, 1970" -->
-<div>Birthdate: {{ currentHero?.birthdate | date : "longDate" }}</div>
+<div>Birthdate: {{ currentHero?.birthdate | date: "longDate" }}</div>
 
 <div>{{ currentHero | json }}</div>
 
 <div>
-  Birthdate: {{ currentHero?.birthdate | date : "longDate" | uppercase }}
+  Birthdate: {{ currentHero?.birthdate | date: "longDate" | uppercase }}
 </div>
 
 <div>
   <!-- pipe price to USD and display the $ symbol -->
-  <label>Price: </label>{{ product.price | currency : "USD" : true }}
+  <label>Price: </label>{{ product.price | currency: "USD" : true }}
 </div>
 
 <a class="to-toc" href="#toc">top</a>
diff --git a/tests/format/angular/angular/attributes.component.html b/tests/format/angular/angular/attributes.component.html
index a911ddb32..8b865c7dc 100644
--- a/tests/format/angular/angular/attributes.component.html
+++ b/tests/format/angular/angular/attributes.component.html
@@ -1,8 +1,8 @@
 <div
-    bindon-target=" a | b : c "
-    [(target)]=" a | b : c "
-    bind-target=" a | b : c "
-    [target]=" a | b : c "
+    bindon-target=" a | b : c:d :e "
+    [(target)]=" a | b : c:d :e "
+    bind-target=" a | b : c:d :e "
+    [target]=" a | b : c:d :e "
     [target]=" a | pipe   "
     [target]=" 0 - 1 "
     [target]=" - 1 "
diff --git a/tests/format/angular/angular/ignore-attribute.component.html b/tests/format/angular/angular/ignore-attribute.component.html
index 93b1e2acf..98acdfd98 100644
--- a/tests/format/angular/angular/ignore-attribute.component.html
+++ b/tests/format/angular/angular/ignore-attribute.component.html
@@ -1,23 +1,23 @@
 <div
-    bindon-target=" a | b : c "
-    [(target)]=" a | b : c "
-    bind-target=" a | b : c "
+  bindon-target=" a | b : c:d :e "
+  [(target)]=" a | b : c:d :e "
+  bind-target=" a | b : c:d :e "
 ></div>
 <!--  prettier-ignore-attribute -->
 <div
-    bindon-target=" a | b : c "
-    [(target)]=" a | b : c "
-    bind-target=" a | b : c "
+  bindon-target=" a | b : c:d :e "
+  [(target)]=" a | b : c:d :e "
+  bind-target=" a | b : c:d :e "
 ></div>
 <!--  prettier-ignore-attribute bind-target -->
 <div
-    bindon-target=" a | b : c "
-    [(target)]=" a | b : c "
-    bind-target=" a | b : c "
+  bindon-target=" a | b : c:d :e "
+  [(target)]=" a | b : c:d :e "
+  bind-target=" a | b : c:d :e "
 ></div>
 <!--  prettier-ignore-attribute [(target)] bind-target -->
 <div
-    bindon-target=" a | b : c "
-    [(target)]=" a | b : c "
-    bind-target=" a | b : c "
+  bindon-target=" a | b : c:d :e "
+  [(target)]=" a | b : c:d :e "
+  bind-target=" a | b : c:d :e "
 ></div>
diff --git a/tests/format/angular/angular/interpolation.component.html b/tests/format/angular/angular/interpolation.component.html
index 80b689120..1c46cbcf6 100644
--- a/tests/format/angular/angular/interpolation.component.html
+++ b/tests/format/angular/angular/interpolation.component.html
@@ -1,4 +1,4 @@
-<div>{{ a | b : c }}</div>
+<div>{{ a | b : c:d :e }}</div>
 <div>{{  a | pipe    }}</div>
 <div>{{ 0 - 1 }}</div>
 <div>{{ - 1 }}</div>
diff --git a/tests/format/angular/bracket-same-line/__snapshots__/jsfmt.spec.js.snap b/tests/format/angular/bracket-same-line/__snapshots__/jsfmt.spec.js.snap
index 048f1e498..334314719 100644
--- a/tests/format/angular/bracket-same-line/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/format/angular/bracket-same-line/__snapshots__/jsfmt.spec.js.snap
@@ -28,7 +28,7 @@ printWidth: 80
 =====================================output=====================================
 <div
   ng-if="$ctrl.shouldShowWarning && !$ctrl.loading"
-  bindon-target="a | b : c"
+  bindon-target="a | b: c"
   (event)="(foo == $event)"
   *ngIf="something ? true : false"
   [(ngModel)]="canSave"
@@ -37,7 +37,7 @@ printWidth: 80
 </div>
 <span
   ng-if="$ctrl.shouldShowWarning && !$ctrl.loading"
-  bindon-target="a | b : c"
+  bindon-target="a | b: c"
   (event)="(foo == $event)"
   *ngIf="something ? true : false"
   [(ngModel)]="canSave"
@@ -45,7 +45,7 @@ printWidth: 80
 >
 <img
   ng-if="$ctrl.shouldShowWarning && !$ctrl.loading"
-  bindon-target="a | b : c"
+  bindon-target="a | b: c"
   (event)="(foo == $event)"
   *ngIf="something ? true : false"
   [(ngModel)]="canSave"
@@ -93,7 +93,7 @@ printWidth: 80
 =====================================output=====================================
 <div
   ng-if="$ctrl.shouldShowWarning && !$ctrl.loading"
-  bindon-target="a | b : c"
+  bindon-target="a | b: c"
   (event)="(foo == $event)"
   *ngIf="something ? true : false"
   [(ngModel)]="canSave">
@@ -101,7 +101,7 @@ printWidth: 80
 </div>
 <span
   ng-if="$ctrl.shouldShowWarning && !$ctrl.loading"
-  bindon-target="a | b : c"
+  bindon-target="a | b: c"
   (event)="(foo == $event)"
   *ngIf="something ? true : false"
   [(ngModel)]="canSave"
@@ -109,7 +109,7 @@ printWidth: 80
 >
 <img
   ng-if="$ctrl.shouldShowWarning && !$ctrl.loading"
-  bindon-target="a | b : c"
+  bindon-target="a | b: c"
   (event)="(foo == $event)"
   *ngIf="something ? true : false"
   [(ngModel)]="canSave" />
diff --git a/tests/format/angular/interpolation/__snapshots__/jsfmt.spec.js.snap b/tests/format/angular/interpolation/__snapshots__/jsfmt.spec.js.snap
index 811bcbc17..bcfde61ef 100644
--- a/tests/format/angular/interpolation/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/format/angular/interpolation/__snapshots__/jsfmt.spec.js.snap
@@ -88,10 +88,10 @@ trailingComma: "none"
 
 =====================================output=====================================
 [
-  a ? (b | c : d) : (e | f : g),
+  a ? (b | c: d) : (e | f: g),
   a | b | c | d,
   a | b | c | d,
-  a | b : (c | d),
+  a | b: (c | d),
   { a: b | c },
   a + b | c,
   (a | b) + c,
@@ -100,22 +100,22 @@ trailingComma: "none"
   a[b | c],
   ($students | async).items,
   ($students | async)(),
-  myData | myPipe : "arg1" : "arg2" : "arg3",
+  myData | myPipe: "arg1" : "arg2" : "arg3",
   value
     | pipeA
       : {
           keyA: reallySuperLongValue,
-          keyB: shortValue | pipeB | pipeC : valueToPipeC
+          keyB: shortValue | pipeB | pipeC: valueToPipeC
         }
       : {
           keyA: reallySuperLongValue,
-          keyB: shortValue | pipeB | pipeC : valueToPipeC
+          keyB: shortValue | pipeB | pipeC: valueToPipeC
         }
     | aaa,
   (hideLinqPanel
     ? "ReportSelection.HideShowLabel_Show.String"
     : "ReportSelection.HideShowLabel_Hide.String"
-  ) | localize : localizationSection
+  ) | localize: localizationSection
 ]
 ================================================================================
 `;