Meet Angular’s New Control Flow
This November, we’ll release Angular version 17 with a number of new template features, including a new built-in syntax for control flow and deferrable views. The new declarative control flow brings the functionality of NgIf, NgFor, and NgSwitch into the framework itself, and deferrable views allows templates to load dependencies lazily, in response to one or more configurable trigger conditions. This is the most significant change we’ve made to Angular templates ever, and we’re hard at work putting the finishing touches on these features.
Here’s a preview of the new features:
Where did the @ come from?
If you follow Angular’s RFC process at all, you may have read our proposals for both control flow and deferrable views. We shared both of these RFCs in June to collect community feedback on various parts of our design, including the template syntax. You might also notice that the example above doesn’t match these RFCs, which used what we call “#-syntax” — HTML-like tags like {#if}, {:else} , and {/if} . What happened?
During the RFC, we received significant positive feedback about the features themselves, and a variety of opinions on the syntax itself. This isn’t unexpected, as syntax can inspire passion in developers. But as the RFC progressed, one alternative idea emerged with real popularity. We call it “@-syntax”, and it roughly resembles the examples above. By our estimation, @-syntax was roughly as popular as #-syntax, maybe even a little more so.
We’ve made minor adjustments to designs in response to RFC feedback, but evaluating such a fundamental change to the syntax takes time. In the closing summary for both RFCs, we summarized the key differences and committed to gathering more data in order to properly consider the community’s proposed alternative.
Evidence-based decision making
Our goal was to quantify the readability, writability, and overall developer experience of both syntax alternatives. Over the past few months we’ve collected feedback from our team, from our expert community of GDEs, and from Angular developers at Google. We included a question about the syntax choice in our annual Developer Survey. We also designed and ran a user experience research study in collaboration with User Research International.
We collected all of the results from these efforts, and the data is conclusive: by a nearly 2:1 margin across all of our polls and studies, both Angular and non-Angular developers prefer the community proposal for @-syntax over the original #-syntax.
This chart illustrates the preferences of the thousands of developers who responded to our annual survey:
The data from our user study was similar, with over 70% of participants preferring @ over # (n = 14). Participants gave a variety of feedback supporting their choices, and cited the simple structure of @-syntax and its similarity to TypeScript and other programming languages as significant positives. The primary downside they noted was the lack of context around the closing }, making it hard to tell which block is being closed. This is an area where we feel good IDE tooling will make a difference.
In addition to the quantitative analysis, the team conducted a technical analysis to understand the constraints around parsing, compatibility with existing templates, and other aspects of @-syntax. We identified two addressable issues:
- Our template parser struggled to differentiate between object literals and the
{which starts a block, if parentheses around conditional expressions, etc. are omitted. We’re resolving this problem by requiring parentheses for now, and will invest in parser improvements in the future. - Existing usages of
@and}as literal characters in templates will need to be escaped via a migration. Based on our initial survey of Google’s codebase, we expect instances of these characters to be rare.
Both of these challenges are solvable.
In conclusion, we’re trusting our community and the data we’ve gathered: Angular v17 will use @-syntax for control flow and deferrable views.
See you in November!
