Angular @if @for @defer
What are Angular’s built-in control flow and @defer blocks, and why did they replace many *ngIf/*ngFor usages?
Answers use simple, clear English.
Quick interview answer
@if/@for/@switch are built into the template compiler with better type narrowing. @for requires track for efficient list diffs. @defer lazy-loads template chunks on viewport/interaction/timer with placeholder/loading/error slots — declarative code splitting for heavy widgets without manual lazy NgModules for every UI piece.
Detailed answer
@if/@for/@switch are built into the template compiler with better type narrowing. @for requires track for efficient list diffs. @defer lazy-loads template chunks on viewport/interaction/timer with placeholder/loading/error slots — declarative code splitting for heavy widgets without manual lazy NgModules for every UI piece.
Real example & use case
@defer (on viewport) { <heavy-chart /> } below the fold; @for (item of items(); track item.id).
Pros & cons
Pros: clearer templates + forced track + easy lazy UI. Cons: learning new syntax; don’t defer LCP content.