Angular 8 How to Implement if elseif else statement

user_5125560 0
Viewed 10863

I am new to Angular 8. I using Angular 8. Any help or hint would be greatly appreciated it!!

I trying to implement the following pseudo code:

if (condition1)
{
    print1
}
else if (condition2)
{
    print2
}
else
{
    print3
}

Here is the code that I am able to implement only if else

<ng-container *ngIf="(5>1);then resultOutOfRange else resultNA;">
</ng-container>
<ng-template #resultOutOfRange>
    <td  class="help-block">Result out of Range </td> 
</ng-template>
<ng-template #resultNA>
    <td>Result N/A</td>
</ng-template>
angular
2 Answers

option 1: nested ngIf:

<ng-container *ngIf="condition1; then true1 else block2"></ng-container>
<ng-template #true1>true1</ng-template>
<ng-template #block2>
  <ng-container *ngIf="condition2; then true2 else true3"></ng-container>
  <ng-template #true2>true2</ng-template>
  <ng-template #true3>true3</ng-template>
</ng-template>

or alternatively, if possible, use ngSwitch:

<div [ngSwitch]="switchCondition">
  <ng-container *ngSwitchCase="case1">true1</ng-container>
  <ng-container *ngSwitchCase="case2">true2</ng-container>
  <ng-container *ngSwitchCase="case3">true3</ng-container>
</div>

ngSwitch works in cases where you need to switch based on a certain value, you could work your code to set some variable based on the result of whatever conditionals by assignign switchCondition in your else if block like:

if (condition1) {
  this.switchCondition = 'case1'
} else if (condition2) {
  this.switchCondition = 'case2'
} else {
  this.switchCondition = 'case3'
}

put that in some function and call when appropriate.

user_48553060

You are looking for a if/else block and then another if/else that is nested. There is no way to stack them like there is in javascript unless you have an atomic value in which case you can use ngSwitch which is similar to a switch/case statement.

<ng-container *ngIf="CONDITION1; else resultNA;">
  <p>Condition 1 is true</p>
</ng-container>

<ng-template #resultNA>
    <ng-container *ngIf="CONDITION 2; else otherBlock;">
        <p>Condition 2 is true</p>
    </ng-container>

    <ng-template #otherBlock>
      <p>No conditions are true</p>
    </ng-template>
</ng-template>

Edit

"I cannot use ngswitch because my conditions are actually very complicated."...

In this case I would recommend you take advantage of the fact you have component code (typescript). Write your logic there and then consume it in the HTML template, this will make your code more maintanable and easier to read.

Example keep in mind you do not have to do this in the OnInit, it can be a method that is called as well or something else that changes as a value changes).

component.ts

displayValue: number;
ngOnInit() {
  displayValue = /*your logic here that dictates what it should be*/.
}

.html

<container-element [ngSwitch]="displayValue">
   <some-element *ngSwitchCase="1">...</some-element>
   <some-element *ngSwitchCase="2">...</some-element>
   <some-element *ngSwitchCase="3">...</some-element>

   <some-element *ngSwitchDefault>...</some-element>
</container-element>

See also https://angular.io/api/common/NgIf and https://angular.io/api/common/NgSwitch

user_12602040
Related