preloader

Angular 17 introduces a transformative built-in control flow for templates – a significant advancement in the framework. This feature introduces a new declarative syntax for writing control flow within templates, integrating the functionality of existing Angular directives like ngIf, ngFor, and ngSwitch directly into the framework. We will discover how to use the new syntax and understand how it works. Additionally, we’ll explore the revolutionary changes it brings to Angular development 

The @if Block Conditionals 

Previously, to display a block of template based on a condition in Angular, we used the NgIf directive: 

With the introduction of Angular 17’s new built-in @if statement, this condition can now be expressed as follows 

The ability to directly specify the content for the @else condition is a notable simplification over the else clause used with the traditional NgIf directive. Additionally, this new control flow feature introduces the @else if capability, which was not available in previous versions of Angular. 
 

In my opinion, the new approach greatly enhances readability. I believe it’s also much easier to learn due to its close resemblance to specific aspects of JavaScript syntax, such as its conditional statements. 

The @switch Block Selection 

In previous versions of Angular, we could write a switch-case statement in the template using the following directives: NgSwitch, NgSwitchCase, and NgSwitchDefault. The template would typically be structured as follows: 

Now, let’s see how we can transform this into the new control flow syntax introduced in Angular 17. Here’s how it can be rewritten: 

Again, this code is closer to JavaScript syntax. However, instead of using the colon (:) as in JavaScript’s switch-case statements, we use curly brackets for our case statements in Angular. The @default block is optional and can be omitted. If no @case matches the expression and there is no @default block, nothing will be displayed. Another benefit of this new syntax is that it does not require a container element to hold the condition expression or each conditional template, simplifying the structure and improving readability 

The @for Block Repeaters 

Loops play a crucial role in every application, serving as fundamental building blocks for working with lists and data. In Angular, one common way to implement loops is by using the NgFor directive: 

Let’s delve into how to construct such a loop using the new @for syntax in the latest version of Angular: 

There are a few notable differences in Angular’s new @for loop syntax compared to the traditional NgFor. Firstly, the ‘let’ keyword typically used in front of variable definitions is omitted. Secondly, a ‘track’ function is introduced, which enhances performance. The value of the ‘track’ expression determines a key used to associate array items with their corresponding views in the DOM. This clear indication of item identity allows Angular to optimize DOM operations as items are added, removed, or moved within a collection. Not using ‘trackBy’ in loops over immutable data has been one of the most common causes of performance issues in Angular applications. Due to this potential for poor performance, the ‘track’ expression is now required in @for loops. Additionally, the built-in @for loop incorporates a convenient @empty block for handling collections with zero items: 

Why Embrace the New Syntax? 

The new syntax in Angular brings numerous significant changes: 

  • Ergonomic Simplicity: The syntax is more intuitive and closely aligns with JavaScript, reducing the need for extensive documentation searches. 
  • Enhanced Type Checking: Achieved through more efficient type narrowing, enhancing the accuracy of coding; 
  • Build-Time Concept: It significantly reduces the runtime footprint, potentially shrinking your bundle size by up to 30 kilobytes and improving your Core Web Vital scores.; 
  • Automatic Integration: The new syntax seamlessly integrates into your templates without the need for additional imports; 
  • Performance Boosts: Offers up to a 90% performance improvement in certain scenarios compared to ngFor,thanks to the new algorithm used in @for; 
  • Simplified trackBy Logic: The trackBy function is replaced by the track property, requiring only an expression, making it easier to write and read. 
     

Early Access and Developer Preview 

The Built-in Control Flow feature is now available as a developer preview starting from Angular version 17, inviting you to experiment with its capabilities. While this feature is in a ready state for experimentation, it’s important to note that it may undergo changes before it achieves full stability. Due to this potential for change, it’s strongly recommended to refrain from using this feature in production projects until it reaches a state of complete stability 
 

Building the Future with Angular 17 

Angular 17 marks a significant milestone in the ‘Angular Renaissance’, introducing features that elevate the developer experience and enhance performance. Accompanying these technical advancements, the Angular team has also unveiled a fresh brand and website, angular.dev, with this release. 

As we conclude our exploration of Angular 17’s Control Flow, I heartily encourage you to integrate these advancements into your projects. The enhancements in Angular 17 are not just about cleaner, more readable code – they embody a shift towards an intuitive and elegantly designed codebase. Angular 17 is leading us into a future where coding is not only about functionality but is also an enjoyable and collaborative experience. Together, let’s embrace and contribute to this exciting phase in the evolution of web development!” 

This revision maintains your positive tone and encouraging message, while adding a bit more emphasis on the key innovations of Angular 17 and the collaborative nature of web development. 

About Author 

Kristina Tadić is a seasoned front-end developer with a focus on Angular, React, and JavaScript. With over five years in the field, she excels in crafting user-friendly interfaces and innovative web solutions. Kristina’s expertise and commitment to the latest industry trends make her a standout professional in the world of web development. 

VIEW ALL BLOGS