I Was Curious, and This Is What I Found About Angular 17’s New Control Flows

What was wrong with the old control flow in Angular?

I was just curious. The old way worked fine — so why did Angular 17 introduce a new syntax for control structures like @if, @for, and @switch? Was it just syntactic sugar, or was there a deeper reason behind this change?

So, I started digging, and what I found made a lot of sense.

The Old Way: Parsing First, Then Evaluating

Before Angular 17, we used *ngIf, *ngFor, and *ngSwitch. Here's how they worked:

With the old syntax, Angular’s template compiler essentially created a template for the element first, and then wrapped it within an TemplateRef. The structural directive (like *ngIf) was then responsible for deciding whether or not to instantiate that template and insert it into the DOM.

• Angular parsed the element and its children first, regardless of the condition.
• Then, the condition (*ngIf, *ngFor, etc.) was evaluated to determine whether the template should be instantiated.
• Even if *ngIf="false", Angular still parsed the element before deciding not to render it.

That sounded inefficient, right? Even if an element wasn’t needed, Angular still had to do some extra work.

The New Way: Evaluating First, Then Parsing

With Angular 17, things changed.

The new syntax works differently. The @if, @for, and @switch blocks are now treated more like regular JavaScript code blocks. The condition is evaluated first, and only then does Angular decide whether or not to parse and render the elements within that block.

If the condition is false in an @if block, Angular completely skips parsing and processing the elements inside. This is a crucial difference. It means that Angular avoids unnecessary work when conditions are not met, leading to potential performance improvements, especially with complex templates.

Analogy:

Think of it like this:

• Old syntax: You prepare a dish (parse the element/create the template) before deciding if you’re even hungry (evaluate the condition). Even if you’re not hungry, you still did the prep work.
• New syntax: You first decide if you’re hungry (evaluate the condition). Only if you’re hungry do you then prepare the dish (parse the element/create the template).

Beyond the core differences in how conditions are evaluated, and elements are parsed, there are a few other important things to know about the new control flow syntax in Angular:

1. *No more `prefix:** The asterisk (*`) prefix used with the old structural directives is gone.
2. Works better with Signals: Angular relied on Zone.js and Change Detection to track changes. With Signals, Angular now has a way to reactively track state changes more efficiently. The new control flow syntax (@if, @for) works natively with Signals and automatically reacts to changes without requiring manual subscriptions or additional logic.
3. Better Type Safety and Predictability: In the new syntax, variables inside @if and @for blocks are better scoped and more predictable, improving type checking.

Final Thoughts

I started with a simple question — Why did Angular change its control structures? — and ended up understanding something much bigger.

Angular 17’s new control flows aren’t just a cosmetic change; they actually change when elements are parsed, making apps more efficient and Signals-friendly. This isn’t just about cleaner syntax — it’s about better performance.

What do you think about the new control flow in Angular 17? Have you tried it yet? Let’s discuss in the comments!

A message from our Founder

Hey, Sunil here. I wanted to take a moment to thank you for reading until the end and for being a part of this community.

Did you know that our team run these publications as a volunteer effort to over 3.5m monthly readers? We don’t receive any funding, we do this to support the community. ❤️

If you want to show some love, please take a moment to follow me on LinkedIn, TikTok, **Instagram. You can also subscribe to our [weekly newsletter](https://newsletter.plainenglish.io/)**.

And before you go, don’t forget to clap and follow the writer️!