*ngIf else if in template
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...