[RFC: #50719]: Angular new Built In Control Flow Syntax 🚧 📢

Angular teams has been working hard to introduce some cool features in upcoming releases and before going getting things into production. Team has opened a new RFC to provide new control flow syntax to support zone/zoneless based applications.

Newly proposed syntax is just SYNTACTIC SUGAR* it will provide common Interface to * structural directives in order to avoid awkwardness syntax underlying for **each
structural directive.

As per RFC
"...technically internals of the new control flow will use the same concepts as the structural directives, including s and view containers."

Why do we need NEW control flow syntax?

• In current implementation *ngIf, *ngFor, [ngSwitch] which are just sugar coated over ng-template therefore adding complex conditional logic will add/require multiple ng-template under the hood based on nesting level.

• Current syntax not handle if/else if/else in convenient way which adds a-lot of boilerplate code wrappers under the hood by framework which adds more complexity while reading code and maintaining templates.

• No strict template checking is done for ngSwitch

• You can't add multiple directive within same element instead either you have to use either special element called ng-container or use normal HTML element.

• To stay relevant with Javascript or Other framework syntax to have less steep curve.

Lastly existing directives not able to function for zoneless application e.g signals implementation therefore angular team has proposed a new built-in control flow syntax for templates in order to support zone (<v16) / zoneless (v16+) applications

New proposed control flow syntax

Conditional Control flow

• Keywords
  • if/else if/else

Old Syntax

New Syntax

Switch Control flow

• Keywords
  • switch/case/default

OLD Syntax

New Syntax

Note: No break statement required 🎉

👉 Interesting way to support multiple cases within a switch.

Loop Control flow

• Keywords
  • for/empty

Old Syntax

New Syntax

Keynote:

• All structural directives are (proposed) syntax is introduced in the form of block { ... }

• Each structural directive has # sign before starting block {#<NAME_OF_DIRECTIVE>} in order to differentiate from HTML elements and Angular directives and ends with </<NAME_OF_DIRECTIVE>.

• New proposed syntax may/mayn't require parenthesis(optional( (<condition) for conditions due to surrounding braces of blocks.

Benefits:

• Code is much clear and compact compare to old syntax.
• Multiple conditions with keywords can be applied.
• Improves DX and helps to improve and maintain code from future perspective.

Conclusion: 📝

The proposed built-in control flow syntax for Angular templates represents a major step forward in improving DX by addressing the weaknesses of the existing micro-syntax.

Therefore Angular team as proposed new CFS syntax for template to support the zone/zoneless(signal) based applications and also trying to achieve better Developer Experience (DX) and try to be as close to JS/TS/Framework syntax to avoid confusion and cluttering in templates.

Hopefully RFC will be closed and final summary would be posted before it gets out in Angular v17

Let me know your thoughts via comments and feedback. 💬

Happy coding and Happy Learning! 🚀🚀