Thought Leadership
Oct 19, 2023

New in Angular — Control Flow Migration Schematic

From Directives to @-Syntax: The Seamless Transition to Angular’s Enhanced Control Flow
New in Angular — Control Flow Migration Schematic

With Angular v17, a new Control Flow syntax was introduced to replace the use of *ngIf , *ngFor and *ngSwitch in our Angular applications.

This new syntax will simplify the way we work with our Angular applications and make our templates cleaner (say goodbye to a bunch of ng-container and ng-template for our app logic).

💡 But the Angular team didn’t stop there!

Not only they are simplifying the control flow syntax for new applications, but they also care about upgrading current existing apps to benefit from these changes. By adding a new schematic (introduced in 17.0.0-next.8 and updated in 17.0.0-rc.0) that searches through your app code and replaces any match of *ngIf , *ngFor and *ngSwitch that is found in your app, to the new syntax.

👋🏻 Say hello to control-flow schematic!

This new schematic (added in this pull request by Jessica Janiuk) allows you to easily replace any *ngIf , *ngFor and *ngSwitch that’s found in your application to use the new syntax.

🤔 How to use it?

As with any other schematic, you have to run the generate command through the CLI and use the control-flow schematic (you need to be using 17.0.0-next.8 or 17.0.0-rc.0 for this command to run).

😮 How it updates my code?

Here’s an example component using the current control flow syntax:

After you run the new schematic, the code will be updated to use the new syntax, looking like this:

⚠️ A few caveats

This schematic is still a developer preview migration, and also existing ng-template are preserved in case they are used elsewhere in the [component] template, so they’re not updated with this schematic.

However, this schematic will make the migration for existing apps to the new control syntax much easier and faster.

. . .
About HeroDevs

HeroDevs partners with open-source authors to offer comprehensive solutions for sunsetted open-source software. Our Never-Ending Support products ensure businesses remain secure and compliant, even as their depended-upon open-source packages reach end-of-life. Alongside this, our elite team of software engineers and architects provides expert consulting and engineering services, assisting clients in migrating from deprecated packages and modernizing their technology stacks.

Article Summary
Explore Angular v17's new Control Flow syntax and simplify your code with the control-flow schematic. Upgrade effortlessly and clean up your templates.
Author
Eduardo Roth
Software Engineer
Related Articles
Executive Order 14028: Elevating National Cybersecurity
The White House's Call to Action for a Safer Digital Future Setting New Benchmarks for Global Cybersecurity Standards
PCI Compliance: What Every Business Owner Needs to Know
Understanding the Essentials of Payment Security and PCI DSS Integration
Navigating Drupal 7 End-of-Life: Your Options and HeroDevs' Never-Ending Support
Explore paths for Drupal 7 users, from upgrading to newer versions to leveraging ongoing support with HeroDevs.