Fix Angular ngIf microsyntax colon formatting (#20051)

changelog_unreleased/angular/20051.md

@@ -0,0 +1,13 @@
+#### Preserve Angular `ngIf` microsyntax keywords after `let` declarations (#20051 by @splincode)
+
+<!-- prettier-ignore -->
+```html
+<!-- Input -->
+<div *ngIf="item$ | async; let item; else loadingTemplate"></div>
+
+<!-- Prettier stable -->
+<div *ngIf="item$ | async; let item; else: loadingTemplate"></div>
+
+<!-- Prettier main -->
+<div *ngIf="item$ | async; let item; else loadingTemplate"></div>
+```

src/language-js/print/angular.js

@@ -54,16 +54,11 @@ function printAngular(path, options, print) {
       const shouldNotPrintColon =
         isNgForOf(path) ||
         isNgForOfTrack(path) ||
-        (((index === 1 &&
+        (parent.body[0].type === "NGMicrosyntaxExpression" &&
           (node.key.name === "then" ||
             node.key.name === "else" ||
-            node.key.name === "as")) ||
-          (index === 2 &&
-            ((node.key.name === "else" &&
-              parent.body[index - 1].type === "NGMicrosyntaxKeyedExpression" &&
-              parent.body[index - 1].key.name === "then") ||
-              node.key.name === "track"))) &&
-          parent.body[0].type === "NGMicrosyntaxExpression");
+            node.key.name === "as" ||
+            (index === 2 && node.key.name === "track")));
       return [
         print("key"),
         shouldNotPrintColon ? " " : ": ",

tests/format/angular/ng-if-microsyntax/__snapshots__/format.test.js.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`ng-if.html format 1`] = `
+====================================options=====================================
+parsers: ["angular"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+<div *ngIf="item$ | async; let item; else loadingTemplate"></div>
+<div *ngIf="value; let item; then content; else loading"></div>
+<div *ngIf="value; let first; let second; else loading"></div>
+
+@if (tab.eventCount$ | async; as count) {
+  <x />
+}
+
+=====================================output=====================================
+<div *ngIf="item$ | async; let item; else loadingTemplate"></div>
+<div *ngIf="value; let item; then content; else loading"></div>
+<div *ngIf="value; let first; let second; else loading"></div>
+
+@if (tab.eventCount$ | async; as count) {
+  <x />
+}
+
+================================================================================
+`;

tests/format/angular/ng-if-microsyntax/format.test.js

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

tests/format/angular/ng-if-microsyntax/ng-if.html

@@ -0,0 +1,7 @@
+<div *ngIf="item$ | async; let item; else loadingTemplate"></div>
+<div *ngIf="value; let item; then content; else loading"></div>
+<div *ngIf="value; let first; let second; else loading"></div>
+
+@if (tab.eventCount$ | async; as count) {
+  <x />
+}