Estoy usando Angular y quiero usar *ngIf else(disponible desde la versión 4) en este ejemplo:

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

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

¿Cómo puedo lograr el mismo comportamiento con ngIf else?

Angular 4 y 5 :

utilizando else:

<div *ngIf="isValid;else other_content">
    content here ...
</div>

<ng-template #other_content>other content here...</ng-template>

también puedes usar 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>

o thensolo:

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

Demo:

Saqueador

Detalles:

<ng-template>: es la propia implementación de Angular de la <template>etiqueta que está de acuerdo con MDN :

El <template>elemento HTML es un mecanismo para contener contenido del lado del cliente que no se debe representar cuando se carga una página, pero que posteriormente se puede instanciar durante el tiempo de ejecución utilizando JavaScript.

En Angular 4.xx puede usar ngIf de cuatro maneras para lograr un procedimiento simple si no:

1. Solo usa If

   <div *ngIf="isValid">
       If isValid is true
   </div>
   

2. Uso de If with Else (Tenga en cuenta que templateName )

   <div *ngIf="isValid; else templateName">
       If isValid is true
   </div>
   
   <ng-template #templateName>
       If isValid is false
   </ng-template>
   

3. Uso de If with Then (tenga en cuenta a templateName )

   <div *ngIf="isValid; then templateName">
       Here is never showing
   </div>
   
   <ng-template #templateName>
       If isValid is true
   </ng-template>
   

4. Usando If con Then y Else

   <div *ngIf="isValid; then thenTemplateName else elseTemplateName">
       Here is never showing
   </div>
   
   <ng-template #thenTemplateName>
       If isValid is true
   </ng-template>
   
   <ng-template #elseTemplateName>
       If isValid is false
   </ng-template>
   

Consejo: ngIf evalúa la expresión y luego representa la plantilla then o else en su lugar cuando la expresión es verdadera o falsa respectivamente. Típicamente el:

• entonces template es la plantilla en línea de ngIf a menos que esté vinculada a un valor diferente.
• de lo contrario, la plantilla está en blanco a menos que esté vinculada.

Para trabajar con observables, esto es lo que suelo hacer para mostrar si la matriz observable consta de datos.

<div *ngIf="(observable$ | async) as listOfObject else emptyList">
   <div >
        ....
    </div>
</div>
 <ng-template #emptyList>
   <div >
        ...
    </div>
</ng-template>

"bindEmail" verificará si el correo electrónico está disponible o no. si existe un correo electrónico, se mostrará Cerrar sesión; de lo contrario, se mostrará Iniciar sesión

<li *ngIf="bindEmail;then logout else login"></li>
<ng-template #logout><li><a routerLink="/logout">Logout</a></li></ng-template>
<ng-template #login><li><a routerLink="/login">Login</a></li></ng-template>

Puede usar <ng-container>y <ng-template>para lograr esto

<ng-container *ngIf="isValid; then template1 else template2"></ng-container>

<ng-template #template1>
     <div>Template 1 contains</div>
</ng-template>

<ng-template #template2>
     <div>Template 2 contains </div>
</ng-template>

Puede encontrar la demostración de Stackblitz Live a continuación

demo en vivo

Espero que esto ayude ... !!!

Para angular 9/8

Enlace fuente con ejemplos

    export class AppComponent {
      isDone = true;
    }

1) * ngIf

    <div *ngIf="isDone">
      It's Done!
    </div>

    <!-- Negation operator-->
    <div *ngIf="!isDone">
      It's Not Done!
    </div>

2) * ngIf y más

    <ng-container *ngIf="isDone; else elseNotDone">
      It's Done!
    </ng-container>

    <ng-template #elseNotDone>
      It's Not Done!
    </ng-template>

3) * ngIf, entonces y más

    <ng-container *ngIf="isDone;  then iAmDone; else iAmNotDone">
    </ng-container>

    <ng-template #iAmDone>
      It's Done!
    </ng-template>

    <ng-template #iAmNotDone>
      It's Not Done!
    </ng-template>

Sintaxis para ngIf / Else

<div *ngIf=”condition; else elseBlock”>Truthy condition</div>
<ng-template #elseBlock>Falsy condition</ng-template>

Usando NgIf / Else / Then sintaxis explícita

Para agregar la plantilla, solo tenemos que vincularla a una plantilla explícitamente.

<div *ngIf=”condition; then thenBlock else elseBlock”> ... </div> 
<ng-template #thenBlock>Then template</ng-template>
<ng-template #elseBlock>Else template</ng-template>

Observables con NgIf y Async Pipe

Para más detalles

Simplemente agregue nuevas actualizaciones de Angular 8.

1. Para el caso si con else, podemos usar ngIf y ngIfElse .

<ng-template [ngIf]="condition" [ngIfElse]="elseBlock">
  Content to render when condition is true.
</ng-template>
<ng-template #elseBlock>
  Content to render when condition is false.
</ng-template>

2. Para el caso si con entonces, podemos usar ngIf y ngIfThen .

<ng-template [ngIf]="condition" [ngIfThen]="thenBlock">
  This content is never showing
</ng-template>
<ng-template #thenBlock>
  Content to render when condition is true.
</ng-template>

3. Para el caso si con then y else, podemos usar ngIf , ngIfThen y ngIfElse .

<ng-template [ngIf]="condition" [ngIfThen]="thenBlock" [ngIfElse]="elseBlock">
  This content is never showing
</ng-template>
<ng-template #thenBlock>
  Content to render when condition is true.
</ng-template>
<ng-template #elseBlock>
  Content to render when condition is false.
</ng-template>

En Angular 4.0, la if..elsesintaxis es bastante similar a los operadores condicionales en Java.

En Java solías hacerlo "condition?stmnt1:stmnt2".

En Angular 4.0 usas *ngIf="condition;then stmnt1 else stmnt2".

El valor resultante de la expresión ngif no solo será el booleano verdadero o falso

si la expresión es solo un objeto, todavía la evalúa como veraz.

si el objeto no está definido o no existe, entonces ngif lo evaluará como falso.

uso común es si existe un objeto cargado, luego mostrar el contenido de este objeto, de lo contrario, mostrar "cargando .......".

 <div *ngIf="!object">
     Still loading...........
 </div>

<div *ngIf="object">
     <!-- the content of this object -->

           object.info, object.id, object.name ... etc.
 </div>

otro ejemplo:

  things = {
 car: 'Honda',
 shoes: 'Nike',
 shirt: 'Tom Ford',
 watch: 'Timex'
 };

 <div *ngIf="things.car; else noCar">
  Nice car!
 </div>

<ng-template #noCar>
   Call a Uber.
</ng-template>

 <!-- Nice car ! -->

ejemplo de anthoer:

<div *ngIf="things.car; let car">
   Nice {{ car }}!
 </div>
<!-- Nice Honda! -->

plantilla ngif

ngif angular 4

ng-template

<ng-template [ngIf]="condition1" [ngIfElse]="template2">
        ...
</ng-template>


<ng-template #template2> 
        ...
</ng-template>

Hay dos posibilidades para usar if condition en etiquetas HTML o plantillas:

1. * Directiva ngIf de CommonModule, en la etiqueta HTML;
2. si más

<div *ngIf="this.model.SerialNumber != '';then ConnectedContent else DisconnectedContent" class="data-font">    </div>

<ng-template #ConnectedContent class="data-font">Connected</ng-template>
<ng-template #DisconnectedContent class="data-font">Disconnected</ng-template>

En angular 4, 5 y 6

Simplemente podemos crear una variable de referencia de plantilla ^[2] y vincularla a la condición else dentro de una directiva * ngIf

Las posibles sintaxis ^[1] son:

<!-- Only If condition -->
<div *ngIf="condition">...</div>
<!-- or -->
<ng-template [ngIf]="condition"><div>...</div></ng-template>


<!-- If and else conditions -->
<div *ngIf="condition; else elseBlock">...</div>
<!-- or -->
<ng-template #elseBlock>...</ng-template>

<!-- If-then-else -->
<div *ngIf="condition; then thenBlock else elseBlock"></div>
<ng-template #thenBlock>...</ng-template>
<ng-template #elseBlock>...</ng-template>


<!-- If and else conditions (storing condition value locally) -->
<div *ngIf="condition as value; else elseBlock">{{value}}</div>
<ng-template #elseBlock>...</ng-template>

DEMO: https://stackblitz.com/edit/angular-feumnt?embed=1&file=src/app/app.component.html

Fuentes:

1. https://angular.io/api/common/NgIf#syntax
2. https://angular.io/guide/template-syntax#template-reference-variables--var-

¿También puede usar el operador condicional corto ternario de Javascript? en angular como este:

{{doThis() ? 'foo' : 'bar'}}

o

<div [ngClass]="doThis() ? 'foo' : 'bar'">

Sé que esto ha pasado un tiempo, pero quiero agregarlo si ayuda. La forma en que seguí es tener dos banderas en el componente y dos ngIfs para las dos banderas correspondientes.

Era simple y funcionaba bien con el material, ya que ng-template y el material no funcionaban bien juntos.