Menu
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?
722
With NgIf we can conditionally add or remove an element from the DOM . If we are faced with multiple conditions a cleaner alternative to multiple nested NgIf statements is the NgSwitch series of directives.
The important difference between the ngIf solution is that through NgSwitch we evaluate the expression only once and then select the element to display depending on the result. Using ngIf we can conditionally add or remove an element from the DOM.
AngularJS is built on top of JavaScript and it has no different syntax for switch case than JavaScript(As long as you are using it in script). JavaScript support switch case statements with following syntax.
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> 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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
