@switch selects template content by matching an expression against @case clauses. It replaces older NgSwitch-based logic and lets the template describe UI decisions directly, reducing component-side lookup and rendering code. section 10.1.3 section 10.5
Candidate-details workflow
A candidate-details template can switch on candidate.status and render app-cv-evaluation, app-interview-preparation, app-interview-feedback, or app-rejection-letter with the candidate ID. An Approved case can nest @if to check whether the offer was accepted. section 10.1.3
Listing 10.7 Using @switch for complex template logic
@Component({
selector: 'app-candidate-details',
template: `
<div class="candidate-details">
<div>
<h2>{{ candidate.firstName }} {{ candidate.lastName }}</h2>
<p>Email: {{ candidate.email }}</p>
<p>{{ candidate.position }}</p>
</div>
@switch (candidate.status) { #1
@case ('CV evaluation') { #2
<app-cv-evaluation [candidateId]="candidate.id" />
}
@case ('Interview preparation') {
<app-interview-preparation [candidateId]="candidate.id" />
}
@case ('Interview Feedback') {
<app-interview-feedback [candidateId]="candidate.id" />
}
@case ('Rejected') {
<app-rejection-letter [candidateId]="candidate.id" />
}
@case ('Approved') {
@if (candidate.offerAccepted) { #3
<app-onboarding-preparation [candidateId]="candidate.id" />
} @else {
<app-candidate-finalization [candidateId]="candidate.id" />
}
}
@default { #4
<span>Unknown candidate status</span>
}
}
</div>
`,
standalone: true,
imports: [
CvEvaluationComponent,
InterviewPreparationComponent,
InterviewFeedbackComponent,
RejectionLetterComponent,
OnboardingPreparationComponent,
CandidateFinalizationComponent,
],
})
export class CandidateDetailsComponent {
@Input() candidate!: Candidate;
}
Inspect the complete candidate-status template, including nested @if logic inside the Approved case. section 10.1.3
Account for these practical differences when adopting or migrating to @switch:
- Do not expect fall-through or a break statement; use @if, @else if, and @else when sequential conditions are preferable. section 10.1.3
- Check migrated cases carefully because @switch uses strict equality (===), whereas NgSwitch used loose equality (==). section 10.1.4
- Run the control-flow migration schematic and follow it with regression and unit testing, especially where tests reference structural directives. section 10.1.4
- Benefit from template code generated ahead of time so the statements become native JavaScript in the application flow. section 10.1.3
