Angular2 ngSwitch not working

Question

I have an ngSwitch for a model attribute bound to a drop-down. It wasn't working, so I tried to simply hard-code the value. Still doesn't work, it displays both divs. What am I doing wrong? Apologies in advance if it's something obvious, I'm new to Angular2.

My html template:

      <!-- display closed date if status is closed, otherwise display active date -->
      <div ngSwitch="ACTV">
          <div class="form-group row" ngSwitchWhen="CLSD">
            <label for="closeDt" class="col-md-4 form-control-label text-md-right">
                                        Close Date
                                        <span class="help-block">Required field</span>
                                    </label>
            <div class="col-md-4 col-xs-12">
              <datetime [timepicker]="false" [(ngModel)]="date2" id="close-date" name="close-date"></datetime>
            </div>
          </div>
          <div class="form-group row" ngSwitchWhen="ACTV">
            <label for="issueDt" class="col-md-4 form-control-label text-md-right">
                                        Active Date
                                        <span class="help-block">Required field</span>
                                    </label>
            <div class="col-md-4 col-xs-12">
              <datetime [timepicker]="false" [(ngModel)]="date2" id="active-date" name="active-date"></datetime>
            </div>
          </div>
      </div>

Result on the npm server:

micronyks · Accepted Answer · 2016-10-21 15:37:39Z

23

In case DEMO required : https://plnkr.co/edit/SCZC5Cx9gnQbg1AkkspX?p=preview

Change,

1)

ngSwitch="ACTV"        TO     [ngSwitch]="'ACTV'"

2)

ngSwitchWhen="CLSD"    TO     *ngSwitchCase="'CLSD'"

3)

ngSwitchWhen="ACTV"    To     *ngSwitchCase="'ACTV'"

edited Oct 21, 2016 at 15:37

answered Oct 21, 2016 at 15:28

micronyks

55.6k17 gold badges122 silver badges166 bronze badges

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

3 Comments

Dima Over a year ago

2) made my day - unexpected behavior.

steve Over a year ago

This answer is helpful (it helped me!), but I suspect #1 is incorrect (not what the OP or others will want to do). If the switch expression is a string literal ('ACTV'), then the switch will always match the 2nd case. The first case will never show. I suspect that ACTV is a variable that can have values 'ACTV' or 'CLSD'. IOW, remove the single quotes from #1. ... It is confusing that the variable has the same name as one its possible values. Maybe the variable should have a different name.

Florian Gössele Over a year ago

Why is it that [ngSwitch] works but *ngSwitch does not? I thought, the * was just syntactic sugar for structural directives? 🤔

Meir · Accepted Answer · 2016-10-21 15:25:15Z

6

What version of angular2 are you using? In the final (release) version the syntax that works for me is:

<div [ngSwitch]="someVariable">
  <div *ngSwitchCase="value1">...</div>
  <div *ngSwitchCase="value2">...</div>
</div>

answered Oct 21, 2016 at 15:25

Meir

14.4k4 gold badges44 silver badges49 bronze badges

Comments

Katana24 · Accepted Answer · 2016-10-21 15:25:18Z

2

Your syntax for using isn't correct. It should be [ngSwitch]="switch_expression" and then the cases should look like this <some-element *ngSwitchCase="match_expression_1">

See here for how to use it.

answered Oct 21, 2016 at 15:25

Katana24

8,97920 gold badges81 silver badges120 bronze badges

Comments

Mourad Idrissi · Accepted Answer · 2016-10-21 15:35:29Z

1

you have to test on object attributs

switch_expression { 
     match_expression_1: value1, 
     match_expression_2: value2, 
     match_expression_3: value3,  
}

and then :

<div [ngSwitch]="switch_expression">
   <div  *ngSwitchCase="match_expression_1">...</div>
   <div  *ngSwitchCase="match_expression_2">...</div>
</div>

for more informations : https://angular.io/docs/ts/latest/api/common/index/NgSwitch-directive.html

edited Oct 21, 2016 at 15:35

answered Oct 21, 2016 at 15:28

Mourad Idrissi

3,8255 gold badges19 silver badges29 bronze badges

Comments

Dan Everson · Accepted Answer · 2017-01-26 20:11:35Z

0

If the variable you are switching on gets updated via subscription, try adding async pipe:

<div [ngSwitch]="someVariable" | async>

https://angular.io/docs/ts/latest/api/common/index/AsyncPipe-pipe.html

edited Jan 26, 2017 at 20:11

answered Jan 26, 2017 at 19:49

Dan Everson

363 bronze badges

Collectives™ on Stack Overflow

Angular2 ngSwitch not working

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related