CODEWITHSUNDEEP
angularif-statementconditional-statements
gstackoverflow
gstackoverflow

Reputation: 37034

Else statement in Angular

How does angular2 propose to render

<div *ngFor="let todo of unfinishedTodos">
    {{todo.title}}
</div>

in case if unfinishedTodos.length >0

and text "empty" in another cases.

P.S.

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

looks ugly

Upvotes: 23

Views: 27493

Answers (4)

mr.Deviant
mr.Deviant

Reputation: 13

CSS solution

<style>
    .empty { display: none; }
    .empty:only-child { display: block; }
</style>

<div>
    <div *ngFor="let todo of unfinishedTodos">
        {{todo.title}}
    </div>
    <div class="empty">
        empty
    </div>
</div>

Upvotes: 1

Michał Pietraszko
Michał Pietraszko

Reputation: 6199

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.

Upvotes: 34

Matej Maloča
Matej Maloča

Reputation: 974

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 >

Upvotes: 7

Sergey Sokolov
Sergey Sokolov

Reputation: 2839

Try this

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

Upvotes: 1

Related Questions