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. It offers better performance and readability than multiple ngIf statements when switching between different content based on a single value.
Use [ngSwitch] with *ngSwitchCase and *ngSwitchDefault for efficient multi-condition rendering.
// component.ts
import { Component } from '@angular/core'
@Component({
selector: 'app-demo',
templateUrl: './demo.component.html'
})
export class DemoComponent {
currentView = 'dashboard'
userRole = 'user'
notificationType = 'success'
switchView(view: string) {
this.currentView = view
}
}
<!-- demo.component.html -->
<!-- Basic ngSwitch example -->
<div class="view-switcher">
<button (click)="switchView('dashboard')">Dashboard</button>
<button (click)="switchView('profile')">Profile</button>
<button (click)="switchView('settings')">Settings</button>
</div>
<div [ngSwitch]="currentView">
<div *ngSwitchCase="'dashboard'">
<h2>Dashboard</h2>
<p>Welcome to your dashboard with charts and stats.</p>
</div>
<div *ngSwitchCase="'profile'">
<h2>Profile</h2>
<p>Edit your personal information here.</p>
</div>
<div *ngSwitchCase="'settings'">
<h2>Settings</h2>
<p>Configure your application preferences.</p>
</div>
<div *ngSwitchDefault>
<h2>Page Not Found</h2>
<p>The requested view is not available.</p>
</div>
</div>
<!-- User role-based content -->
<div [ngSwitch]="userRole">
<div *ngSwitchCase="'admin'">
<h3>Admin Panel</h3>
<button>Manage Users</button>
<button>System Settings</button>
</div>
<div *ngSwitchCase="'user'">
<h3>User Dashboard</h3>
<button>View Profile</button>
<button>Edit Posts</button>
</div>
<div *ngSwitchDefault>
<h3>Guest Access</h3>
<button>Sign In</button>
</div>
</div>
<!-- Notification types -->
<div [ngSwitch]="notificationType">
<div *ngSwitchCase="'success'" class="alert success">
✅ Operation completed successfully!
</div>
<div *ngSwitchCase="'warning'" class="alert warning">
⚠️ Please check your input.
</div>
<div *ngSwitchCase="'error'" class="alert error">
❌ An error occurred.
</div>
<div *ngSwitchDefault class="alert info">
ℹ️ General information message.
</div>
</div>
NgSwitch evaluates the switch expression once and renders only the matching case, making it more efficient than multiple ngIf statements for mutually exclusive conditions. Use [ngSwitch] on the container, *ngSwitchCase for each condition, and *ngSwitchDefault for fallback content. This pattern works well for view switching, user roles, content types, and status displays where only one option should be shown at a time.
Best Practice Note:
This is the same ngSwitch approach used in CoreUI Angular components. Always include ngSwitchDefault for error handling, use string literals or enums for switch values, keep case logic simple, and prefer ngSwitch over multiple ngIf statements for mutually exclusive conditions.
