*ngSwitch for multiple conditions in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to use *ngSwitch on the variable 'color'.

Angular

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

Drag options to blanks, or click blank then click option'

AselectedColor

BcolorValue

Ccolor

Dchoice

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name that is not defined in the component.

Forgetting to use square brackets for property binding.

The [ngSwitch] directive should be bound to the variable that holds the value to switch on. Here, it is color.

2fill in blank

medium

Complete the code to display the message when the case is 'green'.

Angular

<p *ngSwitchCase="[1]">Green selected</p>

Drag options to blanks, or click blank then click option'

A'green'

B"green"

Cgreen

D"Green"

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting quotes around the string value.

Using double quotes inside double quotes without escaping.

The value for *ngSwitchCase must be a string literal enclosed in single quotes inside the double quotes.

3fill in blank

hard

Fix the error in the *ngSwitchCase to correctly check for the number 1.

Angular

<p *ngSwitchCase="[1]">Number one selected</p>

Drag options to blanks, or click blank then click option'

A'1'

B1

C"1"

Done

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes around numbers which makes them strings.

Using an undefined variable name.

When switching on a number, the case value should be the number itself without quotes.

4fill in blank

hard

Fill both blanks to switch on 'status' and check for 'active' case.

Angular

<div [ngSwitch]="[1]">
  <p *ngSwitchCase=[2]>Active status</p>
  <p *ngSwitchDefault>Inactive or unknown</p>
</div>

Drag options to blanks, or click blank then click option'

Astatus

B"active"

C'active'

Dstate

Attempts:

3 left

💡 Hint

Common Mistakes

Using double quotes inside the template without escaping.

Binding to a wrong variable name.

The [ngSwitch] binds to the variable status. The case for 'active' must be a string literal with single quotes inside the template.

5fill in blank

hard

Fill all three blanks to switch on 'mode', check for 'edit' case, and display the message.

Angular

<section [ngSwitch]="[1]">
  <div *ngSwitchCase=[2]>[3]</div>
  <div *ngSwitchDefault>View mode</div>
</section>

Drag options to blanks, or click blank then click option'

Amode

B"edit"

C'Editing content'

D'edit'

Attempts:

3 left

💡 Hint

Common Mistakes

Using double quotes for the case value inside the template.

Putting the message inside quotes which would render the quotes as text.

The switch binds to mode. The case for 'edit' uses single quotes. The displayed message is 'Editing content'.

Practice

1. What is the main purpose of the Angular directive *ngSwitch?

easy

A. To loop through a list of items and display them

B. To bind data from the component to the template

C. To display one template among many based on a matching value

D. To handle user input events like clicks

Solution

1. Step 1: Understand the role of *ngSwitch

   *ngSwitch is used to conditionally display one of many templates based on a value.

2. Step 2: Compare with other directives

   Unlike loops or event handlers, *ngSwitch chooses one template to show from multiple options.

3. Final Answer:

   To display one template among many based on a matching value -> Option C

4. Quick Check:

   *ngSwitch shows one option based on value = B [OK]

Hint: Remember *ngSwitch picks one view based on a value [OK]

Common Mistakes:

• Confusing *ngSwitch with *ngFor for looping
• Thinking *ngSwitch handles events
• Using *ngSwitch for data binding only

2. Which of the following is the correct syntax to use *ngSwitchCase inside an *ngSwitch block?

easy

A. Content

B. Content

C. Content

D. Content

Solution

1. Step 1: Recall Angular structural directive syntax

   Angular uses *directiveName="expression" syntax for structural directives.

2. Step 2: Match correct syntax for *ngSwitchCase

   The correct syntax is *ngSwitchCase="value", with quotes around the value.

3. Final Answer:

   <div *ngSwitchCase="value">Content</div> -> Option A

4. Quick Check:

   *ngSwitchCase uses = and quotes = A [OK]

Hint: Use *ngSwitchCase="value" with quotes and equals [OK]

Common Mistakes:

• Using colon instead of equals
• Missing the asterisk (*) before ngSwitchCase
• Using wrong attribute name like ngSwitch-case

3. Given this Angular template snippet:

<div [ngSwitch]="color">
  <div *ngSwitchCase="'red'">Stop</div>
  <div *ngSwitchCase="'green'">Go</div>
  <div *ngSwitchCase="'yellow'">Wait</div>
  <div *ngSwitchDefault>Unknown</div>
</div>

What will be displayed if color = 'yellow'?

medium

A. Go

B. Wait

C. Stop

D. Unknown

Solution

1. Step 1: Identify the value of color

   The variable color is set to 'yellow'.

2. Step 2: Match color with *ngSwitchCase values

   The case *ngSwitchCase="'yellow'" matches the value.

3. Final Answer:

   Wait -> Option B

4. Quick Check:

   color='yellow' shows 'Wait' = A [OK]

Hint: Match the variable value exactly with ngSwitchCase string [OK]

Common Mistakes:

• Choosing default when a case matches
• Confusing case strings with variables
• Ignoring quotes around case values

4. What is wrong with this Angular snippet?

<div [ngSwitch]="status">
  <div *ngSwitchCase=active>Active</div>
  <div *ngSwitchCase="inactive">Inactive</div>
  <div *ngSwitchDefault>Unknown</div>
</div>

medium

A. Missing quotes around the first *ngSwitchCase value

B. Using [ngSwitch] instead of *ngSwitch

C. No *ngSwitchDefault provided

D. Using *ngSwitchCase instead of *ngSwitchWhen

Solution

1. Step 1: Check syntax of *ngSwitchCase values

   The first case uses *ngSwitchCase=active without quotes, which is invalid for string values.

2. Step 2: Confirm correct usage of quotes

   String values must be in quotes like *ngSwitchCase="'active'" or *ngSwitchCase="active" if active is a variable.

3. Final Answer:

   Missing quotes around the first *ngSwitchCase value -> Option A

4. Quick Check:

   String case values need quotes = C [OK]

Hint: Always quote string values in *ngSwitchCase [OK]

Common Mistakes:

• Omitting quotes around string cases
• Confusing [ngSwitch] with *ngSwitch
• Forgetting *ngSwitchDefault block

5. You want to display different messages for user roles: 'admin', 'editor', 'guest', and a default for others. Which Angular template correctly uses *ngSwitch to handle this?

hard

A.
Admin Panel
Editor Dashboard
Welcome Guest
Access Denied

B.
Admin Panel
Editor Dashboard
Welcome Guest
Access Denied

C.
Admin Panel
Editor Dashboard
Welcome Guest
Access Denied

D.
Admin Panel
Editor Dashboard
Welcome Guest
Access Denied

Solution

1. Step 1: Check the main [ngSwitch] binding

   The main switch must use property binding syntax: [ngSwitch]="userRole".

2. Step 2: Verify *ngSwitchCase values are strings with quotes

   Each case value is a string and must be quoted like *ngSwitchCase="'admin'".

3. Step 3: Confirm default case is present

   The default case uses *ngSwitchDefault without a value, which is correct.

4. Final Answer:

   Correctly uses [ngSwitch] and quotes string cases -> Option D

5. Quick Check:

   Use [ngSwitch] and quote string cases = D [OK]

Hint: Use [ngSwitch] and quote string cases in *ngSwitchCase [OK]

Common Mistakes:

• Using *ngSwitch instead of [ngSwitch]
• Not quoting string case values
• Missing *ngSwitchDefault block