How to use ngSwitch in Angular
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
NgSwitch in Angular provides clean conditional rendering for multiple mutually exclusive conditions, offering better performance than multiple ngIf statements. As the creator of CoreUI, a widely used open-source UI library, I’ve implemented ngSwitch in countless Angular components for dynamic content switching. From my expertise, the most effective approach is using ngSwitch with clear case values and default fallback. This method provides efficient multi-condition rendering with better readability and performance.
Use [ngSwitch] with *ngSwitchCase and *ngSwitchDefault for multi-condition rendering.
// component.ts
export class ViewComponent {
currentView = 'dashboard'
switchView(view: string) {
this.currentView = view
}
}
<!-- template.html -->
<div [ngSwitch]="currentView">
<div *ngSwitchCase="'dashboard'">Dashboard Content</div>
<div *ngSwitchCase="'profile'">Profile Content</div>
<div *ngSwitchCase="'settings'">Settings Content</div>
<div *ngSwitchDefault>Unknown View</div>
</div>
NgSwitch evaluates the expression once and renders only the matching case, making it more efficient than multiple ngIf directives. Use *ngSwitchCase for specific values and *ngSwitchDefault for fallback content when no cases match.
Best Practice Note:
This is the same ngSwitch approach we use in CoreUI Angular components for efficient conditional rendering. Use ngSwitch for mutually exclusive conditions and provide a default case to handle unexpected values.
