¿Cómo usar * ng?

631

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?

kawli norman
fuente
1
Verifique aquí para Angular 8 explicado con el Ejemplo NgIf, NgIf Else y NgIf Then Else freakyjolly.com/…
Code Spy

Respuestas:

982

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.

Bougarfaoui El houcine
fuente
8
Esperaba que hubiera una manera de usar <ng-template> sin otra etiqueta como div, pero curiosamente no lo es ... Sé que <div> se elimina a medida que lo usas, pero creo que es un poco extraño como implementación.
andreas
20
@andreas Puedes usarlo <ng-container>para la cláusula if
Martin Schneider
2
Nota: puede usar ng-containerpara el contenedor que contiene * ngIf, pero no para la plantilla
Simon_Weaver
@Simon_Weaver Lo descubrí por las malas. ¿Pero por qué? ¿Por qué no permitieron *ngIf trabajar ng-template?
Eran Medan
<div * ngIf = "isValid; entonces el contenido más other_content"> aquí se ignora </div> no se ignora. es lugar para inyectar ng-template
dimson d
185

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.
John Henckel
fuente
Parece que el compilador no acepta ...; else .... Probablemente el ;debe ser eliminado.
slartidan
55
en angular-6, probé con ...; else ...y funcionó
WasiF
20

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>
Ah Hiang
fuente
8

"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>
Prashant Shrivastava
fuente
2
Esto no funciona Si fuera correcto, entonces todavía no agregaría ningún valor porque la respuesta aceptada ya muestra cómo hacerlo.
Günter Zöchbauer
8

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

Dic
fuente
8

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>
Code Spy
fuente
1
Esto sólo repite lo que la respuesta aceptada ya se ha dicho
phil294
6

Sintaxis para ngIf / Else

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

ingrese la descripción de la imagen aquí

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>

ingrese la descripción de la imagen aquí

Observables con NgIf y Async Pipe

Para más detalles

ingrese la descripción de la imagen aquí

LYES - CHIOUKH
fuente
6

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>
  1. 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>
  1. 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>
Hoang Tran Son
fuente
¡Excelente! Recientemente nos hemos movido a angular 8
Islam Murtazaev
5

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

hoogw
fuente
5

ng-template

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


<ng-template #template2> 
        ...
</ng-template>
Aniket
fuente
3

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

ingrese la descripción de la imagen aquí

Rzv Razvan
fuente
1
<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>
Amir Touitou
fuente
1

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-
Kalpesh Panchal
fuente
1

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

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

o

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

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.

usuario1707141
fuente