Adopting Angular's Built-in Control Flow Incrementally

With the release of Angular v17, a brand-new control flow syntax became available directly inside the framework. Unlike the older approach, these new "blocks" are part of the template language itself, so no imports or additional modules are required to start using them. The set of blocks includes @if, @else if, @else, @for, @empty, @switch, @case, and @default. For a detailed breakdown of each block, the official documentation is the best resource.

At the moment, this new syntax is still in developer preview. Once it reaches a stable state, it is expected to become the standard way of writing conditional and looping logic in templates, which will eventually lead to the deprecation of the well-known NgIf, NgFor, and NgSwitch directives.

There's no need to worry, though. Both the old directives and the new blocks will coexist for several major releases, so there is no immediate rush. The transition won't happen overnight, giving you ample time to plan and execute the move at your own pace.

To assist with this transition, the Angular team has released an official schematic that can automate much of the migration work.

Running it is straightforward:

# Using Angular CLI
ng g @angular/core:control-flow

# Using Nx
nx g @angular/core:control-flow
Enter fullscreen mode Exit fullscreen mode

After executing the command, the schematic will prompt you for the path you want to migrate. While the default is set to ./ (the root of the project), you can freely specify any other directory. This flexibility means you have two options: migrate the entire workspace in one go, or take an incremental path — moving through the codebase folder by folder, feature by feature, or domain by domain.

Angular schematic to migrate to the new control flow syntax

A word of caution: While the schematic performs impressively well, it's highly recommended to personally review all the changes it introduces. Make sure the transformed templates behave exactly as expected before moving forward.

Once you're comfortable, go ahead and embrace the new syntax. The improved ergonomics are worth the switch.

That's all for this post. Happy migrating, and see you in the next one 😎

Photo by Nadine Shaabana on Unsplash