Exploring Angular 17: A Glimpse into the Future of Web Development - Part 1

In the ever-evolving world of web development, staying updated with the latest technologies and frameworks is crucial. Angular continues to redefine the way developers build web applications. With Angular 17 on the horizon, set to be released in the week of 06-11-2023, according to the official Angular documentation, the community is abuzz with anticipation. In a recent statement, Minko Gechev, from the Angular dev team, expressed his excitement, saying,

Angular 17 will have the highest qualitative impact on DevEx we've ever delivered!

He highlighted three groundbreaking features expected to reshape the developer experience:

• Deferrable Views
• Native Control Flow
• Escuild and Vite

In this blog series, we will look at these features in-depth, exploring how they have transformed in Angular 17 and how developers can leverage them to create powerful web applications.

Angular control flow – Part 1

Angular 17 is knocking on the door, promising a bunch of groundbreaking features that will redefine the way developers interact with the framework. One of the most anticipated enhancements is the introduction of Angular Control Flow. This article will dive into what this feature entails and explore how it transforms our approach to writing conditional statements in Angular applications.

The Evolution of Conditional Statements

Remember the days of *ngIf, *ngFor, and *ngSwitch? Well, brace yourselves because Angular 17 is shaking things up. Angular Control Flow introduces a paradigm shift, allowing developers to write if, for, and switch statements as blocks directly in HTML, thanks to what Angular calls the "@-syntax."

Angular community developers might recall an alternative syntax proposed in the RFC called the "#-syntax." However, after conducting a community survey, Angular opted for the widely preferred "@-syntax."

But why angular decided to change to this syntax? This question is answered in the angular RFC. They explained that the review of the development experience highlighted microsyntax-based control flow as having significant weaknesses compared to syntaxes in other frameworks. As for the timing and why now, This is the summery about what they have in the RFC:

In our ongoing efforts to implement the Signals RFC, we recognized that the existing control flow directives designed for zones would not function in applications without zones. To solve this, we needed a new reactive control flow system for zoneless applications. Although we contemplated modifying the existing directives to support zoneless applications, we dismissed this option due to the risk of unintentionally breaking every existing Angular application, given their dependency on these directives. Additionally, attempting to accommodate both signal and zone-based patterns within a single directive was deemed too complex and inefficient to manage. We also considered creating new reactive control flow directives exclusively for signal components but decided against it to avoid unnecessary distinctions between signal and zone components. Consequently, we opted for a different approach: developing a built-in control flow system for templates. This solution serves the dual purpose of supporting zoneless and signal-based applications while also addressing long-standing user experience issues associated with structural directives.

Configuring Angular Control Flow

To utilize the new control flow, a minor tweak in the tsconfig.json file is required. Add the following property under angularCompilerOptions:

{
  "angularCompilerOptions": {
    ....
    "_enabledBlockTypes": [
      "if", "switch", "for"
    ]
  }
}

Exploring Control Flow in Action

• If-Else Statement: In previous versions, *ngIf served its purpose but had limitations. With Angular 17, the if-else statement becomes more intuitive and readable.

@if (condition){
  <div>The condition is true</div>
} @else if (condition2){
  <div>The second condition is true</div>
} @else {
  <div>Both conditions are false</div>
}

• For Loop Statement: The new NgFor introduces the @for block. Remember to include a trackBy parameter. Additionally, you can use the @empty block to handle empty iterable.

<ul>
  @for (item of items; trackby item; let i = $index){
  <li>{{ item }}: {{ index }}</li>
  } @empty {
  <li>items is empty</li>
  }
</ul>

• Switch-Case Statement: NgSwitch gets a cool upgrade with the @switch block. Handle your switch cases elegantly:

@switch (name) {
  @case ('foo') {
    <span>name: foo</span>
  }
  @case ('bar') {
    <span>name: bar</span>
  }
  @case ('foo bar') {
    <span>name: foo bar</span>
  }
  @default {
    <span>unknown</span>
  }
}

Migrating my project to the new control flow

Transitioning from our old code to Angular's new features can be daunting. Thankfully, the Angular team has our back. They've created a helpful migration script, just like they've done for other features in the past. The following script is based on the guidelines provided in the pull request available as of the writing of this article. So, fear not; we've got a clear path to follow!

ng generate @angular/core:control-flow

Angular 17's Control Flow feature marks a significant leap forward in Angular's evolution. By simplifying conditional statements, developers can enhance readability and maintainability in their applications. With this powerful addition, Angular continues to empower developers, making complex tasks more straightforward and more intuitive. Embrace the future of Angular development with Control Flow and unlock new possibilities in your web applications.

Stay tuned for more insights into Angular 17 and the exciting innovations it brings to the world of web development!