Uso de *ngIf

Clase 11 de 22 • Curso de Fundamentos de Angular

Resumen

El condicional “If” es un “If” en Javascript, en Java, en PHP, en Python o en cualquier lenguaje. Angular posibilita utilizar este condicionante embebido en el HTML para mostrar o no un elemento. Su sintaxis es algo particular, está compuesta por un asterisco seguido de las iniciales características de Angular “ng” y la palabra “If”.

<div *ngIf="isPlatzi">Hola, soy Platzi</div>

Si la condición dentro del “If” se cumple, se mostrará el <div> con el respectivo contenido dentro. De lo contrario, el usuario no verá dicho elemento en el navegador. En la condición del If puedes colocar cualquier operador lógico:

If … else

Para usar un else en Angular, la sintaxis es algo especial. Debes crear un template en tu código HTML usando la etiqueta que provee Angular llamada <ng-template> con una Variable de Template, comenzando con #, para hacer referencia a este elemento desde tu If.

<div *ngIf="isPlatzi; else templateElse">Hola, soy Platzi</div>
<ng-template #templateElse>
    <div>No soy Platzi</div>
</ng-template

Si la condición del If no se cumple, seguido de punto y coma, se coloca la sentencia else haciendo referencia a templateElse, que es el nombre de la variable del template a mostrar en su lugar.

Aporte creado por: Kevin Fiorentino.

Rony Porraz Vargas

student•

Dejo este aporte que explica que mas hacen los ng-templates https://profile.es/blog/angular-templates-las-directivas-ng-template-ng-container-y-ngtemplateoutlet/

Niller David Yanes Diaz

student•

Gran aporte, muchas gracias!!

Jimmy Buriticá Londoño

student•

El blog tiene información muy clara, supongo que hay que tener un poco de cuidado, ya que trabajan en Angula 6.0 y ya vamos en la versión 13.

Alexis E. COLQUE CAYPA

student•

Tambien pueden usar then como condicionales si se cumple. Ejemplo:

<input type="text" required [(ngModel)]="person.name">
<P *ngIf="person.name == 'liz';then thenMyBlock else otherElseMyBlock"> Hola soy alexis</P>
<ng-template #thenMyBlock>
  <p>Hola liz</p>
</ng-template>
<ng-template #otherElseMyBlock>
  <p>Ingresa la palabra liz</p>
</ng-template>

Reinaldo Mendoza

student•

Niiice

Reinaldo Mendoza

student•

Que sintaxis mas agradable, siempre habia escuchado que angular es mas complicado que react, me esta gustando mas angular, aunque lo que si veo es que es mas extenso

Edixon javier Pabon Lizcano

student•

Eduardo Martínez Cruz

student•

Juan Carlos Ortiz Romero

student•

Las directivas *ngIf y *ngFor son atributos que podemos agregarle a los elementos HTML que nos permiten en el caso del *ngIf condicionar si dicha marca debe agregarse a la página HTML.

La directiva *ngFor nos permite generar muchos elementos HTML repetidos a partir del recorrido de un arreglo de datos.

Reinaldo Mendoza

student•

Muy buen resumen

andres neptaly meza vasquez

student•

un fallo que veo en el curso es lo del ng-template, soy yo o no lo habia explicado o me lo perdi ?

CHRISTIAN DANIEL LA CRUZ COTUA

student•

La directiva Ng-template sirve para encapsular un conjunto de elementos html que queremos que se reenderize en caso contrario de la condicion de un ng-if y le podemos dar un identificador como lo hace el profe

Platzi Team

student•

Directiva ngIf

La directiva ngIf en Angular es una directiva de enlace de plantilla que permite mostrar o ocultar elementos en la vista en función de ciertas condiciones. La sintaxis básica de ngIf es la siguiente:

<div *ngIf="condition">Contenido a mostrar</div>

En esta sintaxis, condition es una expresión que se evalúa como true o false. Si condition es true, se mostrará el contenido dentro de la etiqueta div. Si condition es false, el contenido dentro de la etiqueta div se ocultará.

Por ejemplo, si tienes una variable en tu componente de Angular llamada isVisible y quieres mostrar un elemento solo si isVisible es true, puedes usar ngIf de la siguiente manera:

<div *ngIf="isVisible">Contenido a mostrar</div>

La directiva ngIf es muy útil cuando necesitas mostrar o ocultar elementos en la vista en función de ciertas condiciones dinámicas. Puedes usar ngIf en conjunto con otros enlaces de datos y directivas en Angular para crear una interfaz de usuario rica y dinámica.

*ngElse

La directiva ngIf de Angular permite especificar una cláusula "else" mediante el uso de la directiva ngElse. La sintaxis para usar ngElse es la siguiente:

<div *ngIf="condition; else elseBlock">Contenido a mostrar si la condición es verdadera</div>
<ng-template #elseBlock>Contenido a mostrar si la condición es falsa</ng-template>

En esta sintaxis, condition es una expresión que se evalúa como true o false. Si condition es true, se mostrará el contenido dentro de la primera etiqueta div. Si condition es false, se mostrará el contenido dentro de la etiqueta ng-template con la referencia #elseBlock.

Por ejemplo, si tienes una variable en tu componente de Angular llamada isVisible y quieres mostrar un mensaje diferente dependiendo de si isVisible es true o false, puedes usar ngIf y ngElse de la siguiente manera:

<div *ngIf="isVisible; else elseBlock">El elemento está visible</div>
<ng-template #elseBlock>El elemento no está visible</ng-template>

El uso de la cláusula else con ngIf es una manera sencilla y concisa de controlar qué contenido se muestra en la vista en función de ciertas condiciones.

🤯 Algunos Trucos de la Directiva *ngIf

Uso de ngIf con operador ternario: Puedes usar un operador ternario en conjunto con ngIf para mostrar un elemento basado en una condición:

<div *ngIf="condition ? true : false">Contenido a mostrar</div>

Uso de ngIf con objetos: Puedes usar ngIf para verificar si un objeto es null o undefined:

<div *ngIf="objeto; else noHayObjeto">Hay un objeto</div>
<ng-template #noHayObjeto>No hay un objeto</ng-template>

Uso de ngIf con arreglos: Puedes usar ngIf para verificar si un arreglo está vacío:

<div *ngIf="arreglo.length; else noHayElementos">Hay elementos en el arreglo</div>
<ng-template #noHayElementos>No hay elementos en el arreglo</ng-template>

Uso de ngIf con varias condiciones: Puedes usar varias condiciones con ngIf para mostrar un elemento basado en más de una condición:

<div *ngIf="condition1 && condition2">Contenido a mostrar</div>

Uso de ngIf con variables locales: Puedes usar una variable local con ngIf para hacer una referencia a un elemento mostrado o oculto:

<div *ngIf="condition; let variable">
  <p>Referencia a la variable: {{variable}}</p>
</div>

Anderson Duarte Santos

student•

Me preguntaba como podría ser en el caso de existir varias condicionales, y no encontré una forma más sencilla que la que se expone es la siguiente referencia.

De todos modos comparto un ejemplo, en caso tal de que alguien pueda encontrar una forma más sencilla le agradecería la información. app.component.ts

...
export class AppComponent {
...
  product = {
    producto: 'Cereza',
    cantidad: 0
  }
}

app.componet.html

<h2>Carrito</h2>
<p>Producto {{ product.producto }}</p>
<label for="quantity">Cantidad</label>
<input type="number" [(ngModel)]="product.cantidad" name="quantity" id="">
<ng-container *ngIf="product.cantidad === 0 || !product.cantidad; then agrega else block2 "></ng-container>
<ng-template #agrega>
  <p>Agrega productos</p>
</ng-template>
<ng-template #block2>
  <ng-container *ngIf="product.cantidad < 0; then invalido else valido"></ng-container>
  <ng-template #invalido>
    <p>No son validos valores negativos</p>
  </ng-template>
  <ng-template #valido>
    <p>Súper!</p>
  </ng-template>
</ng-template>

Daniel Buitrago

student•

Muy buen curso, hasta el momento ha sido muy simple y claro.

Aaron Paredes Cabrera

student•

ngIf

Estructura de control:

<h2>ngIf</h2>
<input type="text" required [(ngModel)]="person.name" />
<p *ngIf="person.name === 'aaron'">Soy Aaron</p>
<p *ngIf="person.name === 'julian' && person.age === 18; else myBlock">Soy Julian</p>
<ng-template #myBlock>
  <p>Bloque de else</p>
</ng-template>

Luis Eduardo

student•

¿Es obligatorio usar el <ng-template>??

Ayoze Rodríguez Abreu

student•

No es necesario para nada, es solo una manera de hacer las cosas.

Mario Alberto Lopez Rodriguez

student•

Que pasa con los elementos contenidos en un div si al agregar el *ngIf en el div solo se iguala a una propiedad de un objeto ?

*ngIf="person.name" sin comparar con otro valor ("person.name == 'jose')

Que pasa si existe el objeto ? Que pasa si no existe el objeto ?

Diego Fernando Caviedes Camaho

student•

donde podría ver mas afondo del <ng-template>

Nicolas Molina

teacher•

Hola, puedes ver más a detalle en la documentación como funciona el ng-template, pero para poder ayudarte mejor dime ¿Qué necesitas saber? o ¿Qué estás intentando hacer?

Diego Fernando Caviedes Camaho

student•

seria bueno saber la diferencia entre estas 3 ng-template ng-container, ngtemplateoutlet.

ANDRES ALFONSO MIRA MEJIA

student•

✅

Brandon Lee Aguero Fernandez

student•

La directiva *ngTemplateOutlet básicamente nos ayuda a hacer plantillas reutilizables

<ng-container
  *ngTemplateOutlet="tmpl; context: { $implicit: { name: 'user-one' } }"
></ng-container>

<ng-container
  *ngTemplateOutlet="tmpl; context: { $implicit: { name: 'user-two' } }"
></ng-container>

<ng-template #tmpl let-object>
  <h2>{{ object.name }}</h2>
</ng-template>

Puedo encontrar más sobre ngTemplateOutlet en la documentación de Angular

Danilo Caro

student•

Excelente , siempre había usado el if pero nunca el else con *ngIf

Jorge Isaías Sánchez Gutierrez

student•

Buenas tardes, tengo un comportamiento interesante segun el ejempo

<div> <p *ngIf="persona.nombre=='Isaias'"> soy Isaias</p> <p *ngIf="persona.nombre==='Ana'&& persona.edad===44 else ElseBlock"> soy Ana</p> <ng-template #ElseBlock> <P>es el bloque else</P> </ng-template> </div>

al ser verdadero el primer if tambien me muestra el bloque elses, esto puede ser posible por la version ?

agradezco su aportes.

Guillermo Bedoya

student•

<h2>Estructuras de control</h2>
<hr>
<p *ngIf="person.nombre == 'Angel'; else elseBlock">My content</p>
<ng-template #elseBlock>
    <p>Excepcion</p>
</ng-template>
<input type="text" required [(ngModel)]="person.nombre">

German Pinilla

student•

*++Uso de ngIf++

El *ngIf es una de las directivas structural de angular que cambia el DOM y el elemento html al que se le aplique. Y nos permiten analizar una condición y en función de si dicha condición es verdadera o falsa nos va a permitir mostrar / ocultar elementos del DOM.

La directiva ngIf no oculta los elementos con CSS. Sino que los agrega y los elimina físicamente del DOM. Podemos confirmar todo esto utilizando las herramientas de desarrollo del navegador para inspeccionar el DOM.

++Estructura basica de un *ngIf:++

<div *ngIf="show">
  Text to show
</div>

++Ejemplo de *ngIf:++

<input type="text" required #inputName2="ngModel" [(ngModel)]="person.name"><br>
<p *ngIf="person.name === 'nicolas'">Soy nicolas</p>

Tambien podemos agregar un else a la condicion para que valide si no se cumple la condicion.

<!-- input de nombre -->
<input type="text" required #inputName2="ngModel" [(ngModel)]="person.name"><br>
<!-- no muestra este parrafo si no se escribe nicolas literal -->
<p *ngIf="person.name === 'nicolas'">Soy nicolas</p>
<!-- no muestra este parrafo si no se escribe julian literal y si la edad es igual a 18 -->
<p *ngIf="person.name === 'julian' && person.age === 18;then thenBlock else elseBlock">Soy julian</p>
<!-- Si no se cumple ninguna de las condiciones entonces con el apuntador elseBlock
y se muestra el ng-template -->
<ng-template #thenBlock>
  <p>El bloque de then</p>
</ng-template>
<ng-template #elseBlock>
  <p>El bloque de else</p>
</ng-template>

Diego Jurado

student•

Interesante el aporte, ni sabia de ngIF

Hermes Alejandro Acevedo Castellanos

student•

Uhm... no sé qué tan bueno sea meter lógica en una vista.

Jorge Mucarcel

student•

Mi solución para que evalué todos los *ngIf antes de evaluar else.

<input type="text"  required [(ngModel)]="person.name"/>
<P *ngIf="person.name === 'pepe'; else pepitoBlock  " >Soy pepe</P>
<ng-template #pepitoBlock >
<p *ngIf="person.name === 'pepito'; else myblock" >Soy pepito</p>
</ng-template>
<ng-template #myblock>
  <p>nombre Invalido</p>
</ng-template>

Uso de *ngIf

Primeros pasos

Qué es Angular: ventajas y cómo aprenderlo

Instalación de Angular CLI

Comandos de Angular para correr tu proyecto

Estructura de un proyecto en Angular

Conceptos básicos de TypeScript para usar Angular

Comunicación de datos

String interpolation

Property Binding

Introducción al Event Binding de Angular

Otros eventos que puedes escuchar

Data binding con ngModel

Estructuras de control

Uso de *ngIf

Uso de *ngFor

*ngFor para arrays

Uso de *ngSwitch

Angular Devtools

Estilos

Estilos a la lista de productos

Class and style

NgClass y NgStyle

Crear un formulario

Deploy

Despliegue con Firebase Hosting

Despedida

Continúa con el Curso de Angular: Componentes y Servicios

If … else