A simpler way to manage your templates with Angular’s New Control Flow

For Angular developers, maintaining clean and efficient templates is a constant goal. The Angular team has introduced a new control flow syntax designed to simplify template logic and improve maintainability. This blog post will cover the key features of this new syntax. You can use the new control flow syntax directly in your templates without importing CommonModule in Angular v17 and above.

What’s Wrong with the Old Way?

Before diving into the new syntax, let’s take a quick look at the old way of managing control flow in Angular. The traditional *ngIf, *ngSwitch, and *ngFor directives were functional but often led to verbose and sometimes confusing templates. Specifically:

• The asterisk (*) syntax wasn't intuitive for developers.
• Complex conditional logic often required nested *ngIf statements or the use of <ng-template> elements.
• *ngSwitch was challenging to use correctly and remember.
• Looping with *ngFor sometimes required extra markup, such as ng-container, to manage structural changes in tables.

The New Control Flow Syntax

The new control flow syntax simplifies template logic by offering a cleaner, more JavaScript-like approach. Let’s take a look at the key components:

@if

Instead of *ngIf, we now use @if, followed by a condition in parentheses and the content to display within curly brackets. This removes the need for the asterisk and allows the @if directive to be used directly within any tag.

Old Syntax (*ngIf)

<div *ngIf="isLoggedIn; else loginTemplate">
  <p>Welcome back, user!</p>
</div>
<ng-template #loginTemplate>
  <p>Please log in.</p>
</ng-template>

New Syntax (@if)

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

@switch

The @switch syntax offers a cleaner alternative to *ngSwitch. It works much like a JavaScript switch statement, with @case for each possible value and an @default block.

Old Syntax (*ngSwitch)

<div [ngSwitch]="status">
  <div *ngSwitchCase="'loading'">Loading...</div>
  <div *ngSwitchCase="'success'">Data loaded successfully!</div>
  <div *ngSwitchDefault>Something went wrong.</div>
</div>

New Syntax (@switch)

<div>
  @switch (status) {
    @case ('loading') {
      <p>Loading...</p>
    }
    @case ('success') {
      <p>Data loaded successfully!</p>
    }
    @default {
      <p>Something went wrong.</p>
    }
  }
</div>

@for

The @for syntax replaces *ngFor. It uses the keyword of instead of in to define the iterable. A key feature of @for is the required track expression, which helps Angular efficiently update the DOM.

In the new @for syntax, Angular simplifies this process by integrating the track expression directly within the @for loop. You don't need to define a separate function for tracking — it's all done within the loop itself.

Old Syntax (*ngFor)

<ul>
  <li *ngFor="let item of items; trackBy: trackItemId">
    {{ item.name }}
  </li>
  <li *ngIf="items.length === 0">No items available</li>
</ul>

New Syntax (@for)

<ul>
  @for (let item of items; track item.id) {
    <li>{{ item.name }}</li>
  } @empty {
    <li>No items available</li>
  }
</ul>

Contextual Variables

The new @for syntax also provides contextual variables, such as index, count, first, and last, which can be used in the template for greater flexibility.

Old Syntax (with *ngFor)

<ul>
  <li *ngFor="let item of items; let i = index; let isFirst = first">
    {{ item.name }} - Index: {{ i }}
    <span *ngIf="isFirst">(First Item)</span>
  </li>
</ul>

New Syntax (with @for)

<ul>
  @for (let item of items; track item.id) {
    <li>
      {{ item.name }} - Index: {{ index }}
      @if (first) {
        (First Item)
      }
    </li>
  }
</ul>

Benefits of the New Syntax

The new control flow syntax offers several advantages:

1. Simplicity: The syntax is cleaner and easier to read, reducing cognitive load and making templates more maintainable.
2. Flexibility: The new syntax eliminates the need for structural directives on elements, allowing for greater flexibility in template design, especially in tables.
3. Familiarity: The syntax resembles standard JavaScript control flow, lowering the learning curve for new developers and making it more.

Conclusion

The new control flow syntax in Angular makes managing templates easier and more efficient. By using this update, developers can create cleaner, more organized code that runs faster. It simplifies the development process, helping you work smarter and enjoy a better experience while building with Angular.

Thank you for reading! I hope this guide helps you harness the power of Angular’s new control flow for more efficient and enjoyable development. Happy coding!