Angular › New Control Flow Syntax (@if, @for & @switch)

How would you migrate an existing component from asterisk ngIf and asterisk ngFor to the new control flow syntax?

Beginner

Answer

Angular provides a CLI schematic that automatically scans your templates and converts the older structural directive syntax to the new at if and at for blocks, handling the common cases automatically and flagging anything that might need manual review afterward.

ng generate @angular/core:control-flow

// Automatically converts *ngIf and *ngFor usages across your project
// to the new @if and @for block syntax where possible

Real-world example A team modernizes their entire existing codebase to use the new control flow syntax in just a few minutes by running Angular's official migration schematic, rather than manually rewriting hundreds of templates by hand.

Common follow-ups: What kinds of template patterns might the automated migration not be able to handle perfectly?;Should a team migrate their whole codebase at once, or can it be done incrementally?

Angular Schematics & Custom Builders;Angular CLI & Project Structure