Angular's New Template Control Flow (@if, @for, @switch) - A Cleaner Way to Write Angular Templates

Introduction

Angular has evolved significantly over the last few releases. One of the most noticeable improvements in modern Angular is the new template control flow syntax.

If you've been working with Angular for a while, you're probably used to writing templates like this:

• *ngIf
• *ngFor
• *ngSwitch

But newer Angular versions introduced a cleaner alternative:

• @if
• @for
• @switch

These new block-based directives make templates easier to read, easier to maintain, and more aligned with modern Angular features like Signals.

Let’s walk through how they work and why they matter.

Why Angular Introduced New Control Flow

Traditional structural directives worked well, but they came with some drawbacks:

• Complex templates became harder to read
• Often required extra wrapper elements (ng-container)
• Less optimized for Angular’s newer rendering strategies

The new block-style control flow syntax improves readability and allows Angular’s compiler to better optimize template updates.

It also fits naturally with Angular’s signal-based reactivity model, which is becoming more common in modern Angular applications.

Conditional Rendering with @if

Old approach:

<div *ngIf="isLoggedIn">
  Welcome back!
</div>

New approach:

@if (isLoggedIn) {
  <div>Welcome back!</div>
}

You can also easily add an else block.

@if (isLoggedIn) {
  <div>Welcome back!</div>
} @else {
  <div>Please log in</div>
}

This reads much closer to regular programming logic, which makes templates easier to understand.

Looping with @for

Old approach:

<li *ngFor="let product of products">
  {{ product.name }}
</li>

New approach:

@for (product of products; track product.id) {
  <li>{{ product.name }}</li>
}

Benefits of the new syntax:

• Cleaner and more readable
• Built-in tracking support
• Better performance optimization opportunities

Switch Statements with @switch

Old approach:

<div [ngSwitch]="status">
  <p *ngSwitchCase="'loading'">Loading...</p>
  <p *ngSwitchCase="'success'">Success!</p>
  <p *ngSwitchDefault>Error</p>
</div>

New approach:

@switch (status) {
  @case ('loading') {
    <p>Loading...</p>
  }

  @case ('success') {
    <p>Success!</p>
  }

  @default {
    <p>Error</p>
  }
}

Again, the syntax now feels much closer to normal application logic.

A Simple Real-World Example:

Let’s imagine a product list page that loads data from an API and shows different UI states.

Component:

status = signal('loading');
products = signal([]);

Template:

@switch (status()) {

  @case ('loading') {
    <p>Loading products...</p>
  }

  @case ('success') {
    <ul>
      @for (product of products(); track product.id) {
        <li>{{ product.name }}</li>
      }
    </ul>
  }

  @default {
    <p>Something went wrong.</p>
  }

}

This example combines:

• Signals for state
• Modern Angular control flow
• Cleaner UI logic

Why This Matters for Angular Developers

The new template syntax improves several things:

• Better readability
• Templates feel more like normal code.
• Less boilerplate
• Fewer structural directives and wrapper elements.
• Performance improvements
• Angular can optimize block syntax more efficiently.
• Better integration with Signals
• Signals and block syntax together enable fine-grained UI updates.

Should You Start Using It?

If you are:

• Starting a new Angular project
• Upgrading to Angular 17+
• Using signals and standalone components

Then adopting this new syntax is highly recommended.

Existing applications can migrate gradually over time.

Conclusion

Angular’s modern direction is becoming clear:

• Signal-based reactivity
• Cleaner template syntax
• Better developer experience

The new @if, @for, and @switch syntax is a small change that can significantly improve template readability and maintainability.

If you haven't tried it yet, it’s definitely worth experimenting with in your next Angular project.