*ngSwitch for multiple conditions in Angular - Step-by-Step Execution

Concept Flow - *ngSwitch for multiple conditions

Start with a value

↓

Evaluate *ngSwitch expression

↓

Compare with *ngSwitchCase values

↓

Case1

↓

Render matching case block

↓

End

The *ngSwitch directive evaluates an expression and renders the matching *ngSwitchCase block or the *ngSwitchDefault if no match.

Execution Sample

Angular

  <div [ngSwitch]="color">
    <p *ngSwitchCase="'red'">Red selected</p>
    <p *ngSwitchCase="'blue'">Blue selected</p>
    <p *ngSwitchDefault>Other color</p>
  </div>

This code shows how Angular renders a paragraph based on the value of 'color' using *ngSwitch and multiple *ngSwitchCase blocks.

Execution Table

Step	*ngSwitch Expression Value	Checked Case	Match?	Rendered Content
1	'red'	'red'	Yes	'Red selected' paragraph rendered
2	'blue'	'red'	No	No render
3	'blue'	'blue'	Yes	'Blue selected' paragraph rendered
4	'green'	'red'	No	No render
5	'green'	'blue'	No	No render
6	'green'	Default	Yes	'Other color' paragraph rendered
7	'yellow'	'red'	No	No render
8	'yellow'	'blue'	No	No render
9	'yellow'	Default	Yes	'Other color' paragraph rendered
10	N/A	N/A	N/A	End of switch evaluation

💡 No more cases to check; rendering completed based on match or default.

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	After 5	After 6	Final
color	'red'	'blue'	'blue'	'green'	'green'	'green'	'yellow'	N/A
Rendered Content	''	'Red selected'	'Blue selected'	'Blue selected'	'Other color'	'Other color'	'Other color'	N/A

Key Moments - 2 Insights

Why does Angular render the default block when the value doesn't match any case?

Because none of the *ngSwitchCase values matched the expression, Angular falls back to *ngSwitchDefault as shown in rows 6 and 9 of the execution_table.

Does Angular check all cases even after finding a match?

No, Angular stops checking once it finds a matching *ngSwitchCase, as seen in step 1 and 3 where rendering happens immediately.

Visual Quiz - 3 Questions

Look at the execution table, what content is rendered when color is 'blue' at step 3?

A 'Red selected' paragraph

B 'Other color' paragraph

C 'Blue selected' paragraph

D No content rendered

💡 Hint

Check row 3 under Rendered Content in the execution_table.

At which step does the condition become false for the 'red' case when color is 'green'?

A Step 5

B Step 4

C Step 6

D Step 3

💡 Hint

Look at step 4 where color 'green' is checked against 'red' case in the execution_table.

If the *ngSwitchDefault block is removed, what happens when color is 'yellow'?

A No content is rendered

B 'Red selected' paragraph is rendered

C 'Blue selected' paragraph is rendered

D 'Other color' paragraph is rendered

💡 Hint

Refer to steps 7-9 where 'yellow' matches no case and default is used.

Concept Snapshot

*ngSwitch lets you show one block out of many based on a value.
Use [ngSwitch] on a container and *ngSwitchCase on children.
If no case matches, *ngSwitchDefault shows.
Angular stops checking after the first match.
Great for clean multiple condition rendering.

Full Transcript

The *ngSwitch directive in Angular evaluates a value and compares it to multiple *ngSwitchCase values. It renders the matching case's content or the *ngSwitchDefault content if no match is found. The evaluation stops once a match is found. This helps display different content based on a variable cleanly. For example, if the variable 'color' is 'red', the paragraph with 'Red selected' is shown. If 'color' is 'green' and no case matches, the default paragraph 'Other color' is shown. This visual trace shows each step Angular takes to decide what to render.