Angular’s New Control Flow Syntax And Early Benchmark Results

Angular v17 will be released on 6th November 2023, or anytime during that week.

This release comes with a killer feature — the new control flow syntax!

In this article, we will examine the new syntax, why it’s needed, and review the performance gains it brings.

Let’s get to it!

Angular’s New Control Flow Syntax

According to the Angular team:

Basically, *ngIf becomes @if:

@if(condition) {
  <main-content />
} @else if(altCondition) {
  <else-if-content />
} @else {
  <else-content />
}

*ngFor becomes @for:

@for(item of items) {
  <app-item [item]="item" />
}

and *ngSwitch becomes @switch:

@switch(type) {
  @case ('IMAGE') {
    <image-content />
  }
  @case ('VIDEO') {
    <video-content />
  }
  @default {
    <alt-text-content />
  }
}

The Angular team decided to go with the @-syntax after receiving feedback from the community in this RFC.

Why The Need For A New Syntax?

Angular v16 introduced signals in preview mode. In Angular v17, signals are becoming stable.

However, there are still ongoing tasks related to signals, such as signal inputs.

The end goal is to have completely zone-less Angular applications.

To that end:

In other words, the new syntax is not just for improved DX. It’s a requirement for zone-less applications.

The good news is that there is already an improvement in performance.

Don’t believe me?

Keep reading! ⤵️

Performance Gains

Preliminary benchmark results show a performance improvement compared to v16 (and not only).

The results can be found on this webpage, which explicitly states that:

This is what Angular v16 scored in the benchmark:

And then, this is what Angular v17 (RC) scored:

Angular is now in 3rd place 🥳 

You can reproduce the results using this GitHub repository. Of course, depending on your machine, you may not get the exact same numbers!

Conclusion

Another Angular version release that looks promising 🔥

The best part?

There are still things in progress that will further improve performance!

Thanks for reading.