MEAN Cookbook

ngIf directive added support for else statements

In the previous generations of Angular, if you wanted to have an alternative view for an if statement, one common approach was to use a switch statement. For example:

<div [ngSwitch]="isToggled">  <span *ngSwitchCase="true">On</span>  <span *ngSwitchDefault>Off</span></div>

This approach works reasonably well but if you implemented the same sort of logic in a template or controller you would likely choose to use an else statement instead. Now in Angular 4, we can set an else condition in our ngIf directive:

<div *ngIf="isAdmin; else normal_user">  <p>You are an Admin</p></div><ng-template #normal_user>  <p>You are a normal user</p></ng-template>

We simply provide an else statement with a view reference ...