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.
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.
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
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>
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
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
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.
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
Uhm... no sé qué tan bueno sea meter lógica en una vista.
