Back to feed
Dev.to
Dev.to
7/10/2026
The original title is: "Angular Old vs New Syntax: A Practical Cheat Sheet (*ngIf @if, Signals, and More)"

The original title is: "Angular Old vs New Syntax: A Practical Cheat Sheet (*ngIf @if, Signals, and More)"

Original: Angular Old vs New Syntax: A Practical Cheat Sheet (*ngIf @if, Signals, and More)

Short summary

A side-by-side cheat sheet mapping old Angular template syntax (*ngIf, *ngFor, *ngSwitch) to the new block-based equivalents (@if, @for, @switch), plus signals, computed(), and input(). Each swap includes the underlying change-detection or ergonomics difference, not just surface syntax. Includes a migration schematic command for automated rewriting.

  • Old *ngIf/*ngFor/*ngSwitch map to new @if/@for/@switch blocks with built-in else and empty states
  • Signals replace plain properties for fine-grained change detection; computed() caches derived values
  • Angular ships an automated migration schematic: ng generate @angular/core:control-flow

Generated with AI, which can make mistakes.

Is this a good recommendation for you?

Comments

Failed to load comments. Please try again.

Explore more