ngIf with "as" and else-CodePudding

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

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

<div  #elseBlock>
  <h1>customer not found</h1>
</div>

CodePudding user response：

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 you can use, 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 >
    <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.