angularif-statementangular-template

How can I use "*ngIf else"?


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?


Solution

  • 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.