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?

score 133 · Accepted Answer · answered May 04 '17 at 06:53

133

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>

answered May 04 '17 at 06:53

Günter Zöchbauer

623,577
216
2,003
1,567

4

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. – PaladiN May 04 '17 at 07:03
1

Thanks, you're welcome. Glad to hear it fixes your issue :) – Günter Zöchbauer May 04 '17 at 07:04
4

Works! Key point: [ngSwitch]="true" will allow all "SwitchCase condition" tags to be evaluated – ObjectiveTC Oct 07 '17 at 10:25
29

I think it's better to use *ngIf in that case rather than hacking ngSwitch. less code, more readability – Mihail Dec 27 '17 at 13:23
4

@Mihail I also thought that until I realized that the default case was even more complicated to put – Daniel Torres Laserna Aug 30 '18 at 17:32
1

@ObjectiveTC 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' – Daniel Torres Laserna Aug 30 '18 at 17:32
@DanielTorresLaserna - you are right. Thank you for the correction. – ObjectiveTC Aug 31 '18 at 20:23
but according to JS/TS language definition, it should not be `true`, it should be chosen `'key'` itself. Angular-guys went a different way :/ – Nov 13 '19 at 18:24
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! – Pedram A. Keyvani Feb 23 '22 at 16:05

score 34 · Answer 2 · answered Jun 16 '20 at 11:35

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>

score 8 · Answer 3 · answered Jun 25 '20 at 01:35

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">

Angular 2 ngSwitchCase, OR operator not working

3 Answers3