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:
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.
*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:
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.
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 <ng-template> with [ngSwitchCase] for more complex templates.
Example:
Example:
Case 1
Default