Else statement in Angular

Syntax compatible with Angular 4.0 and beyond

<ng-template #elseTemplate>  Content displayed if expression returns false</ng-template><ng-container *ngIf="expression; else elseTemplate">  Content displayed if expression returns true</ng-container>

or

<ng-container *ngIf="expression; then thenBlock; else elseBlock"></ng-container><ng-template #thenBlock>  Content displayed if expression returns true</ng-template><ng-template #elseBlock>  Content displayed if expression returns false</ng-template>

Syntax compatible with Angular 2.0 and beyond

<ng-container *ngIf="expression">    true</ng-container><ng-container *ngIf="!expression">    else</ng-container>

Important

• You can use e.g. <div>, or any other tag, instead of <ng-container>

• <template> had been deprecated since 4.0 in favor of <ng-template> to avoid name collision with already existing tag.

With new Angular 4.0.0 syntax for else statement looks like this:

<div *ngIf="unfinishedTodos && unfinishedTodos.length > 0; else empty">   <div *ngFor="let todo of unfinishedTodos">      {{todo.title}}   </div></div><ng-template #empty>   empty</ng-template >

Try this

<div *ngFor="let todo of unfinishedTodos">    {{todo.title}}</div><div *ngIf="!unfinishedTodos?.length">    empty</div>