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

What performance benefits does the new control flow syntax offer compared to the older structural directives?

Advanced

Answer

Because the new syntax is built directly into Angular's template compiler rather than relying on separate directive classes, Angular can generate more efficient instructions during compilation, resulting in smaller compiled output and often measurably faster rendering, especially noticeable in templates with many conditional or repeated sections.

// The compiler generates more optimized instructions for this built in syntax
@for (item of items; track item.id) {
  <app-item [data]="item" />
}
// compared to the equivalent older *ngFor directive based approach

Real-world example A large data heavy dashboard sees a measurable improvement in rendering speed after migrating its many repeated list sections from the older asterisk ngFor directive to the new at for block syntax.

Common follow-ups: How significant is this performance difference in practice for a typical, smaller application?;Does the Angular CLI provide an automated way to migrate existing templates to the new syntax?

Performance & Lazy Loading;Angular CLI & Project Structure