Angular *ngSwitchCase is not executing

Question

I am new to Angular. I am using ngSwitch in my program but every time I run the program *ngSwitchDefault executes rather than *ngSwitchCase. Here is the code:

<select [(ngModel)]="selectedControl" class="form-control">
    <option *ngFor="let inputControl of inputArray; let i=index" 
    [value]="inputControl">{{inputArray[i]}}</option>                                  
</select>
<span [ngSwitch]="selectedControl">
    <span *ngSwitchCase="text">
    <p>text is selected</p>              
    </span>
    <span *ngSwitchCase="radio">
    <p>radio is selected</p>
    </span>        
    <span *ngSwitchDefault>
    <p>Default value</p>
    </span>
</span>

You need to make it a string `"'true'"` – Gerald Gonzales Oct 17 '17 at 10:30 — Gerald Gonzales, Oct 17 '17 at 10:30

score 1 · Accepted Answer · answered Oct 17 '17 at 10:28

Wrap the *ngSwitchCase expressions into the '' to make them strings. The comparison will be used with ===, so it will compare string with string. In your case it is going to find a member with name radio or text and get their values, which are undefined.

<span [ngSwitch]="selectedControl">
    <span *ngSwitchCase="'text'">
    <!--                 ^----^ -->
    <p>text is selected</p>              
    </span>
    <span *ngSwitchCase="'radio'">
    <!--                 ^-----^ -->
    <p>radio is selected</p>
    </span>        
    <span *ngSwitchDefault>
    <p>Default value</p>
    </span>
</span>

score 0 · Answer 2 · answered Oct 17 '17 at 11:35

0

According to https://angular.io/api/common/NgSwitchCase ngSwitchCase expect expression not string. If you want to use hardcoded string replace *ngSwitchCase="text" with *ngSwitchCase="'text'"

answered Oct 17 '17 at 11:35

zucker

1,066
12
26

score 0 · Answer 3 · answered Jul 25 '19 at 07:40

0

Unlike JavaScript, which uses strict equality, Angular uses loose equality. This means that the empty string, "" matches 0.

https://angular.io/api/common/NgSwitchCase

answered Jul 25 '19 at 07:40

OliverE

437
5
12

Answering with just a quote is usually a bit too brief. Please be so kind and add a sentence or two to relate the quote to the question. – B--rian Jul 25 '19 at 08:04

Angular *ngSwitchCase is not executing

3 Answers3