How to use *ngIf else?

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.

Leave a Comment