CODEWITHSUNDEEP
angular
jadeite1000
jadeite1000

Reputation: 659

Angular 8 How to Implement if elseif else statement

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>

Upvotes: 6

Views: 20980

Answers (2)

bryan60
bryan60

Reputation: 29335

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.

Upvotes: 12

Igor
Igor

Reputation: 62213

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

Upvotes: 5

Related Questions