CODEWITHSUNDEEP
angularswitch-statementng-switchor-operator
PaladiN
PaladiN

Reputation: 4964

Angular 2 ngSwitchCase, OR operator not working

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?

Upvotes: 62

Views: 69297

Answers (4)

Lung Mihai
Lung Mihai

Reputation: 3

Just adding my 2 cents here: @MinaDjuric's answer is correct and @Bahador Raghibizadeh reply is wrong. The && operands are evaluated left to right, and if they are all true, it will return the value of the last one, otherwise false.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND

More generally, the operator returns the value of the first falsy operand encountered when evaluating from left to right, or the value of the last operand if they are all truthy.

You can try this yourself:

const optionOne = 'a';
const optionTwo = 'z';

console.log(['a', 'b', 'c'].includes(optionOne) && optionOne);
// Expected output: a

console.log(['a', 'b', 'c'].includes(optionTwo) && optionTwo);
// Expected output: false

Upvotes: 0

RoB2022
RoB2022

Reputation: 99

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

Upvotes: 9

Bahador Raghibizadeh
Bahador Raghibizadeh

Reputation: 1265

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>

Upvotes: 37

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657801

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>

Upvotes: 138

Related Questions