Two switch case values in angular

Question

In php and java we can do

case 1:
case 2:
   echo "something";

so that when the value is 1 or 2 "something" will be printed on the screen, i am building an angular application i am doing something 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>

The form which is used for single choice can be used for mutiple choice , but i tried something like below to make it more organisable

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

My bad luck it didnt work, can anyone suggest the better way to do this.

Answer 1

(Un)fortunately you can‘t; the ngSwitch is quite “dumb” if you look at the source code: it‘s just a === between the case value and the switch value. You have two options, but both of them are far from great.

Option 1 is using the directive *ngSwitchDefault, but this will only work if all your multiple cases are FORM 1:

<div [ngSwitch]="data.type">
  <div *ngSwitchDefault>FORM 1</div>
  <div *ngSwitchCase="'range'">FORM 2</div>
</div>

The other option, which is quite verbose, is doing something like this:

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

Answer 2

You can use ngTemplateOutlet to implement this:

<ng-container [ngSwitch]="variable">
    <ng-container *ngSwitchCase="1">
        <ng-container *ngTemplateOutlet="form1"></ng-container>
    </ng-container>
    <ng-container *ngSwitchCase="2">
        <ng-container *ngTemplateOutlet="form1"></ng-container>
    </ng-container>
    <ng-container *ngSwitchCase="3">FORM 2</ng-container>
    <ng-container *ngSwitchDefault>FORM 3</ng-container>
    <ng-template #form1>FORM 1</ng-template>
</ng-container>

---

Update

While Angular still considering such feature, there is jonrimmer's switch-cases.directive.ts. Usage example:

<ng-container [ngSwitch]="variable">
    <ng-container *jrSwitchCases="[1, 2]">FORM 1</ng-container>
    <ng-container *ngSwitchCase="3">FORM 2</ng-container>
    <ng-container *ngSwitchDefault>FORM 3</ng-container>
</ng-container>

Answer 3

You can also use the following, which is a lot more flexible. You can then put anything that evaluates to boolean as the *ngSwitchCase value.

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

The advantage this has over using *ngIf blocks is that you can still specify a default.