ngIf with "as" and else

Issue

How can I have a ngIf with the "as" syntax and a else block?

<div class="customer-form-container" *ngIf="(customer$ | async) as customer; else elseBlock">

<div class="customer-not-found-container" #elseBlock>
  <h1>customer not found</h1>
</div>

Solution

You can use ng-template for this purpose. The ng-template tag never appears in the DOM, but you can use it to define templates which you can use in combination with structural directives. For example in the else statement of ngIf.

<div *ngIf="(customer$ | async) as customer; else elseBlock">
  <!-- you can use "customer" here -->
</div>

<ng-template #elseBlock>
  <div class="customer-not-found-container">
    <h1>customer not found</h1>
  </div>
</ng-template>

You can also read more about structural directives (e.g. ngIf) here. There is a section about ng-template, too.

Answered By - Felix Lemke