Replace Angular Structural Directives with Control Flow Syntax using Angular Migrations

Use automatic migration to make your angular codebase use the new control flow. Or follow a manual step-by-step migration, if needed.

The new control flow syntax in Angular, available from version 17, simplifies template syntax and eliminates the need to import CommonModule.

To adopt the new syntax, Angular developers can either manually update their templates using the @if, @for, and @switch blocks or utilize the official migration schematic provided by the Angular CLI.

The schematic (ng generate @angular/core:control-flow) automatically migrates existing code to utilize the new control flow syntax. This new syntax offers improved readability and maintainability for Angular templates.

Additionally, by removing the requirement to import CommonModule, the new control flow syntax can lead to a slight reduction in bundle size.