Q1. What is *ngSwitch directive?
*ngSwitch is a set of directives for conditional rendering based on a switch expression. It consists of [ngSwitch] on a container element, and *ngSwitchCase and *ngSwitchDefault inside. Example:
Admin Panel
User Dashboard
Guest View
Q2. What is the difference between *ngSwitchCase and *ngIf?
*ngSwitchCase is for multiple mutually exclusive conditions based on a single expression. *ngIf is for single condition. *ngSwitch is more readable when you have several options based on the same value. Under the hood, they both add/remove elements.
Q3. Can you use *ngSwitch with string values?
Yes, *ngSwitch works with any type - strings, numbers, booleans, or objects. It uses strict equality (===) to match cases. Example:
Not Found
Server Error
Q4. What happens if multiple *ngSwitchCase match?
Only the first matching *ngSwitchCase is rendered. Angular processes cases in order and stops at the first match. If no cases match, the *ngSwitchDefault is rendered. You cannot have multiple active cases.
Q5. Can you use *ngSwitch with template reference?
Yes, you can use with [ngSwitchCase] for more complex templates. Example:
Case 1
Default