How to write ngIf Else Statement in AngularJS?

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

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s