else - ngif angular 6
¿Cómo usar*ng? (13)
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:
<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>
DEMO: https://stackblitz.com/edit/angular-feumnt?embed=1&file=src/app/app.component.html
Fuentes:
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
?
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
"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>
¿También puede usar el operador condicional corto ternario de Javascript? en angular como este:
{{doThis() ? ''foo'' : ''bar''}}
o
<div [ngClass]="doThis() ? ''foo'' : ''bar''">
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! -->
En Angular 4.0
if..else
sintaxis es bastante similar a los operadores condicionales en Java.
En Java se usa para
"condition?stmnt1:stmnt2"
.
En Angular 4.0 usa
*ngIf="condition;then stmnt1 else stmnt2"
.
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>
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.
ng-template
<!-- 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>
Angular 4 y 5 :
usando
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
then
solo:
<div *ngIf="isValid;then content"></div>
<ng-template #content>content here...</ng-template>
Demo:
Detalles:
<ng-template>
: es la implementación de Angular de la etiqueta
<template>
que está de acuerdo con
MDN
:
El elemento HTML
<template>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 usando JavaScript.
En Angular 4.xx puede usar ngIf de cuatro maneras para lograr un procedimiento simple si no:
-
Solo usa If
<div *ngIf="isValid"> If isValid is true </div> -
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> -
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> -
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.
<ng-template [ngIf]="condition1" [ngIfElse]="template2">
...
</ng-template>
<ng-template #template2>
...
</ng-template>