ngSwitch not using the `*` syntax ?

As ngIf or ngFor, ngSwitch is manipulating the DOM. But, unless I miss something, it can only be called using [ng-switch] and not *ng-switch like we do for ngIf or ngFor.

<div [ng-switch]="value">
  <div *ng-switch-when="'1'">is 1</div>
  <div *ng-switch-when="'2'">is 2</div>
  <div *ng-switch-default>is another value</div>
</div>

Maybe it would make more sense to have something like:

<div *ng-switch="value">
  <div *ng-switch-when="'1'">is 1</div>
  <div *ng-switch-when="'2'">is 2</div>
  <div *ng-switch-default>is another value</div>
</div>

which would be closer to what we do for ngIf or ngFor:

<div *ng-if="test">..</div>
<li *ng-for="#user of users">{{user}}</li>

[diestrin]

Really old issue, but I have one related with this. I understand @mhevery point about not having the ngSwitch in the <ul>, but this is my scenario.

<ul>
  <template ngFor #item [ngForOf]="items">
    <li class="some-list-of-classes" *ngSwitchWhen="1">List type 1</li>
    <li class="some-other-list-of-classes" *ngSwitchWhen="2">List type 2</li>
    <li class="some-random-list-of-classes" *ngSwitchDefault>List type 3</li>
  </template>
</ul>

And well, as you know, I can’t use the [ngSwitch] in the <template> created for the ngFor. And can’t put it in the <ul> since I need to switch based on some #item value. So my only option in here, is to create just one <li> using ngClass to change a large list of classes, and then put the ngSwitchWhen in a template. But this doesn’t feel like the right way to do it.

I think the better way for this, would be

<ul>
  <template ngFor #item [ngForOf]="items">
    <template [ngSwitch]="item.value">
      <li class="some-list-of-classes" *ngSwitchWhen="1">List type 1</li>
      <li class="some-other-list-of-classes" *ngSwitchWhen="2">List type 2</li>
      <li class="some-random-list-of-classes" *ngSwitchDefault>List type 3</li>
    </template>
  </template>
</ul>

instead of

<ul>
  <template ngFor #item [ngForOf]="items">
    <li [ngSwitch="item.value"] class="{
      'some-list-of-classes': item.value ===  1,
      'some-other-list-of-classes': item.value === 2,
      'some-random-list-of-classes': item.value !== 1 && item.value !== 2
    }">
      <template [ngSwitchWhen]="1">List type 1</template>
      <template [ngSwitchWhen]="2">List type 2</template>
      <template [ngSwitchDefault]>List type 3</template>
    </li>
  </template>
</ul>

or

<ul>
  <template ngFor #item [ngForOf]="items">
    <li class="some-list-of-classes" *ngIf="item.value === 1">List type 1</li>
    <li class="some-other-list-of-classes" *ngIf="item.value === 2">List type 2</li>
    <li class="some-random-list-of-classes" *ngIf="item.value !== 1 && item.value !== 2">List type 3</li>
  </template>
</ul>

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}