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
– Gerald Gonzales

2017-10-17 10:30:30 +00:00
Commented Oct 17, 2017 at 10:30 — Gerald Gonzales
– Gerald Gonzales, Commented Oct 17, 2017 at 10:30

Suren Srapyan · Accepted Answer · 2017-10-17 10:28:43Z

1

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>

answered Oct 17, 2017 at 10:28

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

zucker · Accepted Answer · 2017-10-17 11:35:55Z

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, 2017 at 11:35

zucker

1,14715 silver badges30 bronze badges

Comments

OliverE · Accepted Answer · 2019-07-25 07:40:11Z

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, 2019 at 7:40

OliverE

4995 silver badges12 bronze badges

1 Comment

B--rian Over a year ago

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.

Collectives™ on Stack Overflow

Angular *ngSwitchCase is not executing

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related