If else and else if in angular template in html

 if (foo === 1) {

} else if (bar === 99) {

} else if (foo === 2) {

} else {

}

in the template:

<ng-container *ngIf="foo === 1; else elseif1">foo === 1</ng-container>

<ng-template #elseif1>
    <ng-container *ngIf="bar === 99; else elseif2">bar === 99</ng-container>
</ng-template>
<ng-template #elseif2>
    <ng-container *ngIf="foo === 2; else else1">foo === 2</ng-container>
</ng-template>
<ng-template #else1>else</ng-template>

  <ng-container class="f-11" *ngIf="data.dcblWsp ==='' && data.cbrand1Wsp  === '' &&  data.billingPrice ==='0' else wsp">    

                                 

  <li> PD cannot be calculated because no WSP was captured for the district </li>  

  </ng-container>

                                                                 

  <ng-template #wsp>

                                     

  <li *ngIf="data.dcblWsp ==='' else noinvoice"> (Captured WSP - B1 WSP) is ignored as B1 WSP cannot be calculated  </li>

                                     

</ng-template>

<ng-template #noinvoice>

                                     

  <li  *ngIf="data.billingPrice ==='0'"> PD cannot be calculated because no invoices were generated for the district </li>

                                       

  </ng-template>

Reference:

https://stackoverflow.com/questions/43812770/ngif-else-if-in-template