Angular 2 ngSwitchCase, OR operator not working

Question

I have multiple switch statement but for some case i need the common case. So, i am trying the

OR operator => ||

Example:

        <ng-container [ngSwitch]="options">
            <ng-container *ngSwitchCase="'a'">Code A</ng-container>
            <ng-container *ngSwitchCase="'b'">Code B</ng-container>
            <ng-container *ngSwitchCase="'c'">Code C</ng-container>
            <ng-container *ngSwitchCase="'d' || 'e' || 'f'">Common Code</ng-container>
            <ng-container *ngSwitchDefault>Code Default</ng-container>
        </ng-container>

Output:

if case = 'd' returns Common Code
else if case = 'e' and 'f' returns the Code Default 

Here the second last case consists of multiple cases, and now by default the case 'd' is only working and not working for case 'e' and 'f'.

I can't see any multiple case inside the ngSwitchCase docs:

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

Doesn't Angular 2 supports the || operator in the ngSwitchCase?

Simitar

Answer 1

If you evaluate 'd' || 'e' || 'f' the result is 'd' and when options is not 'd', then it doesn't match. You can't use ngSwitchCase that way.

This would work:

    <ng-container [ngSwitch]="true">
        <ng-container *ngSwitchCase="options === 'a'">Code A</ng-container>
        <ng-container *ngSwitchCase="options === 'b'">Code B</ng-container>
        <ng-container *ngSwitchCase="options === 'c'">Code C</ng-container>
        <ng-container *ngSwitchCase="options === 'd' || options === 'e' || options === 'f'">Common Code</ng-container>
        <ng-container *ngSwitchDefault>Code Default</ng-container>
    </ng-container>

Ilowell

Wow! you are Angular God :D I was not thinking that the [ngSwitch] should have the true condition. ;) Thanks for the way out of this. I was scratching my head for hours. – Simitar

Thanks, you're welcome. Glad to hear it fixes your issue :) – Mikael

Works! Key point: [ngSwitch]="true" will allow all "SwitchCase condition" tags to be evaluated – Warhol

I think it's better to use *ngIf in that case rather than hacking ngSwitch. less code, more readability – Pratt

@Pratt I also thought that until I realized that the default case was even more complicated to put – Compass

@Warhol in fact it says match a 'true' value, then he evaluate until he found a true, and if he don't he will fall in the 'ngSwitchDefault' – Compass

@DanielTorresLaserna - you are right. Thank you for the correction. – Warhol

but according to JS/TS language definition, it should not be true, it should be chosen 'key' itself. Angular-guys went a different way :/ – Cosmogony

I use ngSwitch when I want to evaluate a statement once, instead of using ngIf multiple times. In that case, your solution won't work! – Liliuokalani

Answer 2

I think this syntax is better:

    <ng-container [ngSwitch]="options">
        <ng-container *ngSwitchCase="'a'">Code A</ng-container>
        <ng-container *ngSwitchCase="'b'">Code B</ng-container>
        <ng-container *ngSwitchCase="'c'">Code C</ng-container>
        <ng-container *ngSwitchCase="['d', 'e', 'f'].includes(options) ? options : !options">Common Code</ng-container>
        <ng-container *ngSwitchDefault>Code Default</ng-container>
    </ng-container>

Tactual

Very nice solution – Mccarley

Maybe better *ngSwitchCase="['d', 'e', 'f'].includes(options) && options" – Istanbul

@MinaDjuric Your code in ngSwitchCase returns a boolean (true/false) value, but the options value type is a string. So this code will not work. – Tactual

Answer 3

Thanks Bahador R, helped me create a pipe.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'switchMultiCase'
})
export class SwitchMultiCasePipe implements PipeTransform {

    transform(cases: any[], switchOption: any): any {
        return cases.includes(switchOption) ? switchOption : !switchOption;
    }

}

use as

<ng-container [ngSwitch]="switchOption">
...
<div *ngSwitchCase="['somecase', 'anothercase'] | switchMultiCase:switchOption">

Tooling