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 :
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>Manifestación:
Detalles:
<ng-template> : es la propia implementación de Angular de la etiqueta <template> que está de acuerdo con MDN :
El elemento HTML
<template>es un mecanismo para almacenar contenido del lado del cliente que no se representa cuando se carga una página, pero que posteriormente se puede crear una instancia durante el tiempo de ejecución mediante JavaScript.
En Angular 4.xx
Puede usar ngIf de cuatro maneras para lograr un simple procedimiento if - else :
solo usa si
<div *ngIf="isValid"> If isValid is true </div>Usando If con Else (por favor notifique a templateName )
<div *ngIf="isValid; else templateName"> If isValid is true </div> <ng-template #templateName> If isValid is false </ng-template>Usando If with Then (por favor notifique a templateName )
<div *ngIf="isValid; then templateName"> Here is never showing </div> <ng-template #templateName> If isValid is true </ng-template>Uso de 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>Sugerencia: 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 la plantilla es la plantilla en línea de ngIf a menos que esté vinculada a un valor diferente.
- otra plantilla está en blanco a menos que esté enlazada.
Para Angular 9/8
Enlace fuente con ejemplos
export class AppComponent { isDone = true; }1) *ngSi
<div *ngIf="isDone"> It's Done! </div> <!-- Negation operator--> <div *ngIf="!isDone"> It's Not Done! </div>2) *ngIf y Else
<ng-container *ngIf="isDone; else elseNotDone"> It's Done! </ng-container> <ng-template #elseNotDone> It's Not Done! </ng-template>3) *ngIf, Entonces y Else
<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>