How to write ngIf Else Condition Statement in Angular?

Angular 4 updated the *ngIf directive with new feature that allows us to use if/else style syntax as shown below

  • Using If
<div *ngIf="isValid">
    If isValid is true
</div>
  • Using If with Else
<div *ngIf="isValid;else otherTemplateName">
    If isValid is true
</div>

<ng-template #otherTemplateName>else content displayed...</ng-template>
  • Using If with Then and Else
<div *ngIf="isValid; then templateName else otherTemplateName">this text wont show</div>

<ng-template #templateName>If isValid is true</ng-template>
<ng-template #otherTemplateName>else content displayed...</ng-template>
  • Using If with Then 
<div *ngIf="isValid; then templateName">this text wont show</div>

<ng-template #templateName>If isValid is true</ng-template>

 

Leave a Reply