Uso de *ngIf
Contenido del curso
Uso de *ngIf
Contenido del curso
Rony Porraz Vargas
Niller David Yanes Diaz
Jimmy Buriticá Londoño
Alexis E. COLQUE CAYPA
Reinaldo Mendoza
Reinaldo Mendoza
Edixon javier Pabon Lizcano
Eduardo Martínez Cruz
Juan Carlos Ortiz Romero
Reinaldo Mendoza
andres neptaly meza vasquez
CHRISTIAN DANIEL LA CRUZ COTUA
Platzi Team
Anderson Duarte Santos
Daniel Buitrago
Aaron Paredes Cabrera
Julieth Viviana Cobos Guerrero
David Andrés Rincón Suárez
Luis Eduardo
Ayoze Rodríguez Abreu
Mario Alberto Lopez Rodriguez
Diego Fernando Caviedes Camaho
Nicolas Molina
ProfesorDiego Fernando Caviedes Camaho
ANDRES ALFONSO MIRA MEJIA
Brandon Lee Aguero Fernandez
Danilo Caro
Jorge Isaías Sánchez Gutierrez
Guillermo Bedoya
German Pinilla
Diego Jurado
Dejo este aporte que explica que mas hacen los ng-templates
Gran aporte, muchas gracias!!
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.
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>
Niiice
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
X2
X3
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.
Muy buen resumen
un fallo que veo en el curso es lo del ng-template, soy yo o no lo habia explicado o me lo perdi ?
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
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
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>
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>
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>
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>
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>
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>
Muy buen curso, hasta el momento ha sido muy simple y claro.
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>
*ngIf genera error con angular 22
Angular va por versiones mucho más tempranas, así que probablemente te refieras a las versiones recientes con componentes standalone.
En Angular moderno, *ngIf ya no se carga de forma global: necesitas importar explícitamente CommonModule en tu componente o, mejor aún, usar la nueva sintaxis nativa @if que vino a reemplazarlo. ¿Estás importando CommonModule en tu archivo TypeScript?
Para Angular 21.2, la instrucción ngIf y la etiqueta ng-template cambian a:
@if (person.name === 'David') {
<p>Soy David</p>
}
@else if (person.name === 'Andres') {
<p>Soy Andres</p>
}
¿Es obligatorio usar el <ng-template>??
No es necesario para nada, es solo una manera de hacer las cosas.
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 ?
donde podría ver mas afondo del <ng-template>
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?
seria bueno saber la diferencia entre estas 3 ng-template ng-container, ngtemplateoutlet.
✅
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
Excelente , siempre había usado el if pero nunca el else con *ngIf
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.
<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">
*++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>
Interesante el aporte, ni sabia de ngIF