New Control Flow Syntax (@if, @for & @switch)
5 questions found
What is the new at if control flow block in Angular, and how does it compare to the older asterisk ngIf directive?
Beginner
The at if block is a newer, built in template syntax for conditionally showing content, reading more like a regular programming language conditional than the older asterisk ngIf structural directive. It requires no imports, since it is built directly into Angular's template compiler, and generally performs better than the older directive.
@Component({
selector: 'app-greeting',
template: `
@if (isLoggedIn) {
<p>Welcome back</p>
} @else {
<p>Please log in</p>
}
`
})
export class GreetingComponent {
isLoggedIn = false;
}
Real-world example
A website shows a personalized welcome message for signed in users and a simple login prompt for everyone else, using the at if block instead of the older asterisk ngIf and asterisk ngIf else combination.
Common follow-ups: Do you need to import CommonModule to use the new at if syntax?;Can existing components using asterisk ngIf be gradually migrated to the new syntax?
Directives;Components & Templates
How does the new at for control flow block work, and why does it require a track expression?
Beginner
The at for block repeats a piece of template content for every item in a list, similar to the older ngFor directive, but it requires a track expression, telling Angular exactly how to identify each item uniquely, which helps Angular efficiently update the list when items are added, removed, or reordered.
@Component({
selector: 'app-todo-list',
template: `
@for (todo of todos; track todo.id) {
<li>{{ todo.text }}</li>
} @empty {
<li>No tasks yet</li>
}
`
})
export class TodoListComponent {
todos: { id: number; text: string }[] = [];
}
Real-world example
A to do list app displays every task using the at for block, tracking each item by its unique id, and automatically shows a friendly empty state message using the at empty block when there are no tasks at all.
Common follow-ups: What happens if you use track index instead of a unique property from your data?;What does the at empty block specifically handle that the older ngFor did not support directly?
Conditional Rendering & Lists (Keys);Performance & Lazy Loading
How does the new at switch control flow block let you handle multiple possible conditions cleanly?
Intermediate
The at switch block lets you check a single value against several possible cases, rendering different content for each matching case, similar to a switch statement in regular programming, and providing an at default case for anything that does not match any of the specific cases listed.
@Component({
selector: 'app-status-badge',
template: `
@switch (status) {
@case ('active') { <span class="green">Active</span> }
@case ('pending') { <span class="yellow">Pending</span> }
@default { <span class="gray">Unknown</span> }
}
`
})
export class StatusBadgeComponent {
status = 'active';
}
Real-world example
An order tracking page displays a differently colored badge depending on whether an order's status is active, pending, or something else entirely, using the at switch block instead of a long chain of at if and at else if conditions.
Common follow-ups: How is this new syntax different from the older ngSwitch directive in terms of readability?;What happens if none of the case values match and there is no at default case provided?
Components & Templates;Design Patterns in Angular
What performance benefits does the new control flow syntax offer compared to the older structural directives?
Advanced
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
How would you migrate an existing component from asterisk ngIf and asterisk ngFor to the new control flow syntax?
Beginner
Angular provides a CLI schematic that automatically scans your templates and converts the older structural directive syntax to the new at if and at for blocks, handling the common cases automatically and flagging anything that might need manual review afterward.
ng generate @angular/core:control-flow
// Automatically converts *ngIf and *ngFor usages across your project
// to the new @if and @for block syntax where possible
Real-world example
A team modernizes their entire existing codebase to use the new control flow syntax in just a few minutes by running Angular's official migration schematic, rather than manually rewriting hundreds of templates by hand.
Common follow-ups: What kinds of template patterns might the automated migration not be able to handle perfectly?;Should a team migrate their whole codebase at once, or can it be done incrementally?
Angular Schematics & Custom Builders;Angular CLI & Project Structure