Built-in Control Flow @if @for @switch
What are the key trade-offs of Built-in Control Flow @if @for @switch? When would you choose it vs alternatives?
Answers use simple, clear English.
Audio N/AQuick interview answer
Pros: Clearer templates; forces track for lists. Cons: Muscle memory of structural directives.
Detailed answer
Pros: Clearer templates; forces track for lists. Cons: Muscle memory of structural directives. Decision: pick when benefits outweigh operational cost. Core: New template syntax replaces *ngIf/*ngFor for many cases: @if, @for (with track), @switch. Better type narrowing and performance guidance via mandatory track. Real-time example: @for (item of items(); track item.id) { <li>{{ item.name }}</li> } Pros: Clearer templates; forces track for lists. Cons: Muscle memory of structural directives. Common mistakes: Using index as track for reorderable lists. Best practices: Always track by identity; prefer new syntax in Angular 17+. Audience level: Mid-level.
Full explanation
New template syntax replaces *ngIf/*ngFor for many cases: @if, @for (with track), @switch. Better type narrowing and performance guidance via mandatory track.
Real example & use case
@for (item of items(); track item.id) { <li>{{ item.name }}</li> }
Pros & cons
Pros: Clearer templates; forces track for lists. Cons: Muscle memory of structural directives.
Common mistakes
Using index as track for reorderable lists.
Best practices
Always track by identity; prefer new syntax in Angular 17+.
Follow-up questions
Only answered follow-ups are shown — click to open with full answers