*ngIf else if in template

How would I have multiple cases in an *ngIf statement? I'm used to Vue or Angular 1 with having an if, else if, and else, but it seems like Angular 4 only has a true (if) and false (else) condition.

According to the documentation, I can only do:

<ng-container *ngIf="foo === 1; then first else second"></ng-container>
<ng-template #first>First</ng-template>
<ng-template #second>Second</ng-template>
<ng-template #third>Third</ng-template>

But I want to have multiple conditions (something like):

<ng-container *ngIf="foo === 1; then first; foo === 2; then second else third"></ng-container>
<ng-template #first>First</ng-template>
<ng-template #second>Second</ng-template>
<ng-template #third>Third</ng-template>

But I'm ending up having to use ngSwitch, which feels like a hack:

<ng-container [ngSwitch]="true">
  <div *ngSwitchCase="foo === 1">First</div>
  <div *ngSwitchCase="bar === 2">Second</div>
  <div *ngSwitchDefault>Third</div>
</ng-container>

Alternately, it seems like a lot of the syntaxes I've got used to from Angular 1 and Vue aren't supported in Angular 4, so what would be the recommended way to structure my code with conditions like this?

Another alternative is to nest conditions

<ng-container *ngIf="foo === 1;else second"></ng-container>
<ng-template #second>
    <ng-container *ngIf="foo === 2;else third"></ng-container>
</ng-template>
<ng-template #third></ng-template>

You can just use:

<ng-template [ngIf]="index == 1">First</ng-template>
<ng-template [ngIf]="index == 2">Second</ng-template>
<ng-template [ngIf]="index == 3">Third</ng-template>

unless the ng-container part is important to your design I suppose.

Here's a Plunker

This seems to be the cleanest way to do

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>

Notice that it works like a proper else if statement should when the conditions involve different variables (only 1 case is true at a time). Some of the other answers don't work right in such a case.

aside: gosh angular, that's some really ugly else if template code...

You can use multiple way based on sitaution:

1. If you Variable is limited to specific Number or String, best way is using ngSwitch or ngIf:

   <!-- foo = 3 -->
   <div [ngSwitch]="foo">
       <div *ngSwitchCase="1">First Number</div>
       <div *ngSwitchCase="2">Second Number</div>
       <div *ngSwitchCase="3">Third Number</div>
       <div *ngSwitchDefault>Other Number</div>
   </div>
   
   <!-- foo = 3 -->
   <ng-template [ngIf]="foo === 1">First Number</ng-template>
   <ng-template [ngIf]="foo === 2">Second Number</ng-template>
   <ng-template [ngIf]="foo === 3">Third Number</ng-template>
   
   
   <!-- foo = 'David' -->
   <div [ngSwitch]="foo">
       <div *ngSwitchCase="'Daniel'">Daniel String</div>
       <div *ngSwitchCase="'David'">David String</div>
       <div *ngSwitchCase="'Alex'">Alex String</div>
       <div *ngSwitchDefault>Other String</div>
   </div>
   
   <!-- foo = 'David' -->
   <ng-template [ngIf]="foo === 'Alex'">Alex String</ng-template>
   <ng-template [ngIf]="foo === 'David'">David String</ng-template>
   <ng-template [ngIf]="foo === 'Daniel'">Daniel String</ng-template>
   

2. Above not suitable for if elseif else codes and dynamic codes, you can use below code:

   <!-- foo = 5 -->
   <ng-container *ngIf="foo >= 1 && foo <= 3; then t13"></ng-container>
   <ng-container *ngIf="foo >= 4 && foo <= 6; then t46"></ng-container>
   <ng-container *ngIf="foo >= 7; then t7"></ng-container>
   
   <!-- If Statement -->
   <ng-template #t13>
       Template for foo between 1 and 3
   </ng-template>
   <!-- If Else Statement -->
   <ng-template #t46>
       Template for foo between 4 and 6
   </ng-template>
   <!-- Else Statement -->
   <ng-template #t7>
       Template for foo greater than 7
   </ng-template>
   

Note: You can choose any format, but notice every code has own problems