How can I use "*ngIf else"?

Question

I'm using Angular and I want to use *ngIf else (available since version 4) in this example:

<div *ngIf="isValid">   content here ... </div>  <div *ngIf="!isValid">  other content here... </div> 

How can I achieve the same behavior with ngIf else?

Answer 1

Angular 4 and 5:

Using else:

<div *ngIf="isValid;else other_content">     content here ... </div>  <ng-template #other_content>other content here...</ng-template> 

You can also use then else:

<div *ngIf="isValid;then content else other_content">here is ignored</div> <ng-template #content>content here...</ng-template> <ng-template #other_content>other content here...</ng-template> 

Or then alone:

<div *ngIf="isValid;then content"></div> <ng-template #content>content here...</ng-template> 

Demo:

Plunker

Details:

<ng-template>: is Angular’s own implementation of the <template> tag which is according to MDN:

The HTML <template> element is a mechanism for holding client-side content that is not to be rendered when a page is loaded but may subsequently be instantiated during runtime using JavaScript.