Bird
0
0

Identify the issue in this Angular template snippet:

medium📝 Debug Q7 of 15
Angular - Directives
Identify the issue in this Angular template snippet:
<div [ngSwitch]="value">
  <div *ngSwitchCase="1">One</div>
  <div *ngSwitchCase="2">Two</div>
  <div *ngSwitchCase="3">Three</div>
  <div *ngSwitchCase>Default</div>
</div>
AThe *ngSwitchCase values must be strings, so numbers are invalid.
BThe last *ngSwitchCase is missing a value and should be *ngSwitchDefault instead.
CThe [ngSwitch] directive should be written as *ngSwitch instead.
DThe *ngSwitchCase directives must be placed on the parent div, not child divs.
Step-by-Step Solution
Solution:
  1. Step 1: Check *ngSwitchCase usage

    *ngSwitchCase requires a value to match against the switch expression.
  2. Step 2: Identify default case syntax

    To specify a default case, Angular uses *ngSwitchDefault, not an empty *ngSwitchCase.
  3. Step 3: Validate other options

    Numbers are valid values, [ngSwitch] is correct syntax, and child divs can have *ngSwitchCase.
  4. Final Answer:

    The last *ngSwitchCase is missing a value and should be *ngSwitchDefault instead. -> Option B
  5. Quick Check:

    Default case uses *ngSwitchDefault, not empty *ngSwitchCase [OK]
Quick Trick: Default case requires *ngSwitchDefault, not empty *ngSwitchCase [OK]
Common Mistakes:
  • Using empty *ngSwitchCase for default case
  • Assuming *ngSwitchCase values must be strings
  • Confusing [ngSwitch] with *ngSwitch directive

Want More Practice?

15+ quiz questions · All difficulty levels · Free

Free Signup - Practice All Questions
More Angular Quizzes