En Angular 4.x. x Puede usar ngIf de cuatro maneras para lograr un procedimiento simple if else:

1. Solo Use Si

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

2. Usando Si con Else (Por favor, observe a templateName)

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

3. Usando Si con Entonces (Por favor note 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, a continuación, hace que la entonces o else plantilla en su lugar cuando la expresión es veraz o falsa respectivamente. Normalmente el:

• entonces la plantilla es la plantilla inline de ngIf a menos que esté vinculada a un valor diferente.
• else la plantilla está en blanco a menos que esté enlazada.

Para trabajar con observable, esto es lo que suelo hacer para mostrar si la matriz observable consiste en datos.

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

"bindEmail" comprobará que el correo electrónico está disponible o no. si el correo electrónico existe, se mostrará Logout, de lo contrario, Se mostrará Login

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

En Angular 4.0 if..else la sintaxis es bastante similar a los operadores condicionales en Java.

En Java se usa "condition?stmnt1:stmnt2".

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

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

Si la expresión es solo un objeto, todavía lo evalúa como verdad.

Si el objeto no está definido, o no existe, entonces ngif lo evaluará como falsedad.

El uso común es si un objeto cargado, existe, a continuación, mostrar el contenido de este objeto, de lo contrario mostrar "loading.......".

 <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 anterior:

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

Ngif plantilla

Ngif angular 4

<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 vincule eso 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 -

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

Fue simple y funcionó bien con el material, ya que ng-plantilla y material no funcionaban bien juntos.

Sintaxis para ngIf/Else

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

Usando la sintaxis ngIf / Else/ Then explicit

Para añadir entonces plantilla solo tenemos que enlazarla 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 Tubería Asíncrona

Para más detalles