feature: support multiple case matching in `ngSwitch`/`@switch`

[peterhe2000]

Like what anuglar 1 provide
https://docs.angularjs.org/api/ng/directive/ngSwitch

Also mentioned in here:
#12174

Angular version: 2.4.7

[wayearn]

@peterhe2000 I support you.

I am building an angular application like the below.

<div [ngSwitch]="data.type">
  <div *ngSwitchCase="'multi-choice'">FORM 1</div>
  <div *ngSwitchCase="'singe-choice'">FORM 1</div>
  <div *ngSwitchCase="'range'">FORM 2</div>
</div>

In angular1, I can do this:

<div class="animate-switch" ng-switch-when="'multi-choice'|'singe-choice'" ng-switch-when-separator="|">Settings Div</div>

But, there's no "ng-switch-when-seprartor" feature like in angular2

<div [ngSwitch]="data.type">
  <div *ngSwitchCase="'multi-choice' || 'singe-choice'">FORM 1</div>
</div>

for now, the solution is:

<div [ngSwitch]="data.type">
    <div *ngSwitchCase="data.type=='multi-choice' ||data.type== 'singe-choice'?data.type:'notInCase'">FORM 1</div>
<div *ngSwitchCase="'range'">FORM 2</div>
</div>

[peterhe2000]

@kanlidy You solution may not work according to #12174.

[waterplea]

I'd also love that feature, since plain switch case in every language provide that functionality.

[kherock]

Hi, I'm also interested in this! I also just had the thought of borrowing the new NgIf/Then/Else microsyntax here since it kind of makes sense for NgSwitch to be able to use a TemplateRef. This issue could be solved by allowing the following syntax:

<div [ngSwitch]="data.type">
  <div *ngSwitchCase="'multi-choice'; do form1"></div>
  <div *ngSwitchCase="'singe-choice'; do form1"></div>
  <ng-template #form1>FORM 1</ng-template>
  <div *ngSwitchCase="'range'">FORM 2</div>
</div>

Additionally, it allows for some other neat things that you can do with TemplateRefs.
Obviously it's not quite as terse as most languages' switch keyword but it seems to fit well. Also I can't think of a better keyword than do at the moment.

[Sky4CE]

any progress on this ?

[Ghostbird]

I'd like to see this too, I was surprised that angular does not offer this functionality, since it is one of the basic functionalities of switch statements in most languages.
For now I'll rewrite my code with *ngIf statements.

EDIT: Oh wait, then I'll have to use a crazy nested construction of else blocks to replace the default case :(

[Ghostbird]

Would it be sufficient to replace:

 _matchCase(value: any): boolean {
const matched = value == this._ngSwitch;

with:

 _matchCase(value: any): boolean {
const matched = value == this._ngSwitch
    || (value instanceof Array && value.some(x => x == value));

in packages/common/src/directives/ng_switch.ts

I guess it isn't that simple.

In the meantime I'm going to try the boolean evaluation trick mentioned by @kanlidy, thanks for that.

[rogerramosme]

+1 on this

[pmccloghrylaing]

I don't mind the NgIf (...; do ...) syntax, that seems like a reasonable solution.

Anything else requires a separator, the best I could think of was or. The boolean and bitwise OR operators (|| and |) should behave as per usual in JS. Or you require the separator to be specified like in v1.

Another option could be defining the cases in child elements, e.g.:

<div [ngSwitch]="data.type">
  <div *ngSwitchMultiple>
    <ng-switch-case value="'multi-choice'"></ng-switch-case>
    <ng-switch-case value="'single-choice'"></ng-switch-case>
    FORM 1
  </div>
  <div *ngSwitchCase="'range'">FORM 2</div>
</div>

I think in comparison using the NgIf do is far simpler.

[trotyl]

Relates to #20027 (which is possible while this one is not)

[kherock]

Yeah I don't think the separator approach is that great of an idea. #20027 also seems reasonable.

Also, if anyone following this wants an actual workaround they can do now without having to duplicate code, NgTemplateOutlet can be used in the style I suggested before, though it's still a lot of boilerplate:

<div [ngSwitch]="data.type">
  <div *ngSwitchCase="'multi-choice'">
    <ng-container *ngTemplateOutlet="form1"></ng-container>
  </div>
  <div *ngSwitchCase="'single-choice'">
    <ng-container *ngTemplateOutlet="form1"></ng-container>
  </div>
  <ng-template #form1>FORM 1</ng-template>

  <div *ngSwitchCase="'range'">FORM 2</div>
</div>

[kkajdd]

HI,
When i try to implement ngSwitch it works like charm but in the spec file i get an error as No provider for NgSwitch? what might be the cause?