Angular 6 : ngIf else

Angular 6 : ngIf else 

Overview

Sample code for ngIf and else

Code

Here "detail" is my data coming from API

Way 1

<div *ngIf="detail; then thenBlock else elseBlock"></div>

<ng-template #thenBlock>

  <div> 

    <h2>{{detail.Name | uppercase}}</h2>    

    <button (click)="goBack()">go back</button>

  </div>

</ng-template>

<ng-template #elseBlock>

  <h2>Detail not available !</h2>  

  <button (click)="goBack()">go back</button>

</ng-template>

Way 2

<div *ngIf="!detail">

  <h2>Detail not available !</h2>  

  <button (click)="goBack()">go back</button>

</div>

Hope this will help you and save your time.

Enjoy !!!

:)