What is the new control flow syntax in Angular templates?

Angular’s new control flow syntax replaces ngIf, ngFor, and ngSwitch with built-in blocks like @if, @for, and @switch for more readable, concise templates and better performance.

Control flow blocks start with an @ symbol and allow simple JavaScript-like conditional and loop constructs directly in templates, improving clarity and reducing boilerplate.

Code

@if (condition) { <p>Show if true</p> }
@else { <p>Show if false</p> }

@for (item of items; track item.id) {
  <div>{{item.name}}</div>
}