Meet Angular’s New Control Flow

By admin
This

November
DATE

, we’ll release Angular version

17
CARDINAL

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
ORG

,

NgFor
PERSON

, and

NgSwitch
PERSON

into the framework itself, and deferrable views allows templates to load dependencies lazily, in response to

one
CARDINAL

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
PERSON

’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
DATE

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
CARDINAL

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
ORG

, and overall developer experience of both syntax alternatives. Over

the past few months
DATE

we’ve collected feedback from our team, from our expert community of GDEs, and from Angular developers at

Google
ORG

. We included a question about the syntax choice in our

annual
DATE

Developer Survey. We also designed and ran a user experience research study in collaboration with

User Research International
ORG

.

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
PERSON

and non-Angular developers prefer the community proposal for @-syntax over the original #-syntax.

This chart illustrates the preferences of the

thousands
CARDINAL

of developers who responded to our

annual
DATE

survey:

Syntax Preference in

the 2023
DATE

Angular Developer Survey

The data from our user study was similar, with

over 70%
PERCENT

of participants preferring @ over

#
DATE

(n =

14
CARDINAL

). Participants gave a variety of feedback supporting their choices, and cited the simple structure of @-syntax and its similarity to

TypeScript
ORG

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
CARDINAL

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
ORG

’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
DATE

!