*ngIf else if in template *ngIf else if in template angular angular

*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...