Switching with @switch
Choose templates with @switch and @case.
Switching with @switch is a free Angular Academy lesson on CoddyKit. This is lesson 3 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, and your progress syncs across the web and the CoddyKit app. The Angular Academy course includes 4 lessons in total.
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.
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 38
- Lessons
- 144
Frequently Asked Questions
Is the “Switching with @switch” lesson free?
Yes — any 3 lessons of the Angular Academy learning path, including “Switching with @switch”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Angular Academy course includes 4 lessons in total.
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, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.
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