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.