else block within ng-if

Question

I'm trying to render different buttons based on if a property is starred or not. The logic for checking if a property is starred is working fine. This is my code.

<li class="list-inline-item" *ngIf="property.starred === true; else elseBlock">
    <button class="btn btn-primary" (click)="sendLike(property.id)"><i class="fa fa-heart"></i></button>
    <ng-template #elseBlock><button>Test</button></ng-template>
</li>

The true condition is working fine. But if the property.starred is false, then the elseblock never renders.

Any ideas here

Answer 1

Do it like this:

<li class="list-inline-item">
  <button *ngIf="property.starred; else elseBlock" 
          class="btn btn-primary" 
          (click)="sendLike(property.id)">
    <i class="fa fa-heart"></i>
  </button>

  <ng-template #elseBlock>
    <button>Test</button>
  </ng-template>
</li>