Support for the new Angular Control Flow syntax

[thaoula]

Description

Hi Team,

The Angular team recently introduced a new Control Flow syntax for templates - https://angular.dev/guide/templates/control-flow

The new control flow syntax provides the following elements - If, else, switch and for loops. These are alternatives to *ngIf, *ngFor and *ngSwitch.

Below is some examples of the control flow syntax and expected output-

Input

With this new feature, when I give like this input:

@if (a > b) {
{{a}} is greater than {{b}}
}

@if (a > b) {
{{a}} is greater than {{b}}
} @else if (b > a) {
{{a}} is less than {{b}}
} @else {
{{a}} is equal to {{b}}
}

@for (item of items; track item.name) {
<li> {{ item.name }} </li>
} @empty {
<li> There are no items. </li>
}

@switch (condition) {
@case (caseA) { 
Case A.
}
@case (caseB) {
Case B.
}
@default {
Default case.
}
}

Expected Output

I'd like to see this output:

@if (a > b) {
  {{a}} is greater than {{b}}
}

@if (a > b) {
  {{a}} is greater than {{b}}
} @else if (b > a) {
  {{a}} is less than {{b}}
} @else {
  {{a}} is equal to {{b}}
}

@for (item of items; track item.name) {
  <li> {{ item.name }} </li>
} @empty {
  <li> There are no items. </li>
}

@switch (condition) {
  @case (caseA) {
    Case A.
  }
  @case (caseB) {
    Case B.
  }
  @default {
    Default case.
  }
}

Environment

OS: Mac

[liesahead]

This issue deserves more attention, imo, because currently it's a pain to read such code while also no desire to return to the old syntax.

@for (item of items; track item.id) {
<p>{{ item.name }}
} @empty {
<p>[No items.]</p>
}

[gergely-gyorgy-both]

This issue deserves more attention, imo, because currently it's a pain to read such code while also no desire to return to the old syntax.

@for (item of items; track item.id) {
<p>{{ item.name }}
} @empty {
<p>[No items.]</p>
}

There is an ongoing PR regarding this issue, so it's definitely work in progress.

[liesahead]

@gergely-gyorgy-both , great, thanks 😄 just wanted to bump the issue up a bit by commenting here.

[schulzi66]

@gergely-gyorgy-both Thank you! Really looking forward to it, can't wait 🙏

[tsenguunchik]

Excited to see this!

[meowzhin]

Any updates on this? The alternative is use Prettier which in my opinion is terrible and I tend to avoid it at all costs.

[gndk]

@thaoula @bitwiseman FYI this change seems to have possibly unintended consequences.

I use js-beautify to beautify MJML output. With the new release the output changed, see here:

Before:

    <style type="text/css">
      @media only screen and (min-width:480px) {
        .mj-column-per-100 { width:100% !important; max-width: 100%; }
      }
    </style>

After:

   <style type="text/css">
-    @media only screen and (min-width:480px) {
-      .mj-column-per-100 {
-        width: 100% !important;
-        max-width: 100%;
-      }
+  @media only screen and (min-width:480px) {
+      .mj-column-per-100
+      {
+      width:100%
+      !important;
+      max-width:
+      100%;
+  }
     }
   </style>

Settings used with htmlBeautify:

indent_size: 2,
preserve_newlines: false,
css: {
  end_with_newline: false,
},
js: {
  end_with_newline: false,
},
html: {
  end_with_newline: true,
},

[bitwiseman]

Thanks for the heads up!

Hm, strange. I would expect the css beautifier to handle the style tag contents.

If I can resolve it today, I'll roll back.

[gergely-gyorgy-both]

@thaoula @bitwiseman FYI this change seems to have possibly unintended consequences.

I use js-beautify to beautify MJML output. With the new release the output changed, see here:

Before:

    <style type="text/css">
      @media only screen and (min-width:480px) {
        .mj-column-per-100 { width:100% !important; max-width: 100%; }
      }
    </style>

After:

   <style type="text/css">
-    @media only screen and (min-width:480px) {
-      .mj-column-per-100 {
-        width: 100% !important;
-        max-width: 100%;
-      }
+  @media only screen and (min-width:480px) {
+      .mj-column-per-100
+      {
+      width:100%
+      !important;
+      max-width:
+      100%;
+  }
     }
   </style>

Settings used with htmlBeautify:

indent_size: 2,
preserve_newlines: false,
css: {
  end_with_newline: false,
},
js: {
  end_with_newline: false,
},
html: {
  end_with_newline: true,
},

This is quite strange. Sorry for the inconvenience, @bitwiseman please notify me if you need any help fixing this.

[bitwiseman]

@gergely-gyorgy-both
See also #2246 . I've switching this feature to off by default (#2247).
Don't feel bad. This is a hard problem space and these issues are why I lean towards "off by default" changes. In this, I took the change with the feature "off by default in most cases". Lesson learned for me. 😄

[bitwiseman]

microsoft/vscode-html-languageservice#177 is the last step needed in getting this made available in VS Code.