Switching with @switch
Choose templates with @switch and @case.
Switching with @switch is a free Angular Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Switching with switch
The at-switch block chooses one branch among several based on a value, like a switch statement. It pairs with at-case and at-default.
Basic switch Syntax
Write at-switch with the expression in parentheses, then one or more at-case blocks, each with a matching value.
// @switch (status) {
// @case ('loading') { <p>Loading...</p> }
// @case ('error') { <p>Error!</p> }
// @default { <p>Ready</p> }
// }The case Block
Each at-case takes a value in parentheses. The first case whose value strictly equals the switch expression is rendered.
The default Block
The at-default block renders when no case matches. It is optional but recommended for completeness.
Strict Equality
Matching uses strict equality (===). Make sure case values have the same type as the switch expression.
Switching on a Signal
The switch expression can be a signal call, so the view updates as the signal changes.
// @switch (state()) {
// @case ('on') { <p>On</p> }
// @case ('off') { <p>Off</p> }
// }Replacing ngSwitch
This replaces the older combination of ngSwitch, star-ngSwitchCase, and star-ngSwitchDefault directives, with cleaner syntax and no import.
Only One Branch Renders
At-switch renders exactly one matching branch (or default). Other branches are not present in the DOM at all.
Enums and Constants
Cases can compare against enum members or constants exposed on the component, improving readability and type safety.
Nesting Inside switch
Each case block can contain any template content, including other control flow blocks like at-if and at-for.
When to Use switch
Prefer at-switch over a long at-if / at-else if chain when branching on a single value with several discrete cases.
Quick Check: switch
The switch block fallback.
Recap: Switching
You learned the at-switch block with at-case branches matched by strict equality and an optional at-default fallback. It replaces ngSwitch and renders exactly one branch. Next: deferred loading with at-defer.
Frequently asked questions
Is the “Switching with @switch” lesson free?
Yes — the full text of “Switching with @switch” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.
What will I learn in “Switching with @switch”?
Choose templates with @switch and @case. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Angular Academy?
No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Switching with @switch” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Angular Academy lesson?
Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Conditional Rendering with @if
- Looping with @for
- Switching with @switch
- Deferred Loading with @defer