*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'.