No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Uso de *ngIf

11/22
Recursos

El condicional 鈥淚f鈥聽es un聽鈥淚f鈥 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聽鈥渘g鈥聽y la palabra聽鈥淚f鈥.

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

Si la condici贸n dentro del聽鈥淚f鈥聽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:

tabla-angular.png

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.

Aportes 25

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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>

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

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.

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

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 鈥渆lse鈥 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

  1. 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>
  1. 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>
  1. 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>
  1. 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>
  1. 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

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

app.componet.html

<h1>Carrito</h1>
<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:

<h1>ngIf</h1>
<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>

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>
  <h1>{{ object.name }}</h1>
</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 聽\
聽 聽 聽 聽 \

soy Isaias\

聽 聽 聽 聽 \

soy Ana\

聽 聽 聽 聽 \<ng-template #ElseBlock>聽 聽 聽 聽 聽 \

es el bloque else\

聽 聽 聽 聽 \</ng-template>聽 聽 聽 \
al ser verdadero el primer if tambien me muestra el bloque elses, esto puede ser posible por la version ? agradezco su aportes.
<h1>Estructuras de control</h1>
<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>

Uhm鈥 no s茅 qu茅 tan bueno sea meter l贸gica en una vista.

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>

Ell *ngIf es una directiva en Angular que se usa para mostrar u ocultar elementos HTML en funci贸n de una expresi贸n booleana.

Digamos que tienes un componente que tiene un bot贸n, y quieres mostrar un mensaje diferente dependiendo de si el bot贸n ha sido presionado o no. Puedes usar la directiva *ngIf para lograr esto. Por ejemplo, aqu铆 hay un c贸digo HTML que usa *ngIf:

html

<button (click)=鈥渂otonPresionado = true鈥>Presiona el bot贸n</button>

<div *ngIf=鈥渂otonPresionado鈥>
隆Has presionado el bot贸n!
</div>
En este ejemplo, la variable botonPresionado se establece en true cuando el usuario presiona el bot贸n. Luego, la directiva *ngIf se aplica a un elemento div, y se eval煤a la expresi贸n botonPresionado. Si la expresi贸n es true, el elemento div se muestra en la p谩gina, y si es false, el elemento se oculta.

Entonces, en resumen, *ngIf es una directiva 煤til en Angular que te permite mostrar u ocultar elementos HTML en funci贸n de una expresi贸n booleana.

required tampoco seria necesario

Ok, debo decir que esto s铆 es un poco raro de ver al inicio, es m谩s sencillo en otros frameworks

Quise usar un Form para agrupar los inputs del mismo, sin embargo los ngModels no funcionan dentro del Form, porqu猫?, a霉n no lo s猫

*ngIf es una directiva de Angular que se utiliza para mostrar o ocultar un elemento HTML en la interfaz de usuario en funci贸n de una condici贸n. Esto es 煤til cuando quieres mostrar o ocultar un elemento en tu aplicaci贸n en funci贸n de ciertos valores o circunstancias espec铆ficas.

Por ejemplo, supongamos que quieres mostrar un mensaje de bienvenida solo si el usuario ha iniciado sesi贸n en tu aplicaci贸n. Puedes utilizar *ngIf de la siguiente manera:

<p *ngIf="usuarioLogueado">Bienvenido!</p>
En este caso, se est谩 utilizando *ngIf para enlazar la propiedad 鈥渦suarioLogueado鈥 con la etiqueta p. Si la propiedad 鈥渦suarioLogueado鈥 es verdadera, se mostrar谩 el mensaje de bienvenida en la interfaz de usuario. Si la propiedad 鈥渦suarioLogueado鈥 es falsa, la etiqueta p no se mostrar谩 en la interfaz de usuario.

*ngIf es una de las directivas m谩s 煤tiles de Angular y se utiliza ampliamente para mostrar o ocultar elementos en la interfaz de usuario en funci贸n de diferentes condiciones. Adem谩s, *ngIf tambi茅n permite mostrar elementos alternativos si la condici贸n es falsa, utilizando la sintaxis 鈥*ngIf=鈥渃ondici贸n; else alternativa鈥濃.

Notese que, si cuando uno escribe 鈥渘icolas鈥 no esta declarado el else en la <p> sino cuando uno escribe 鈥渏ulian鈥, no se vayan a confundir, porque uno es cuando solo tiene IF y el otro cuando el primero no lo cumple y asi entra el ELSE.


huy, no sab铆a que se pod铆a utilizar el else con el *ngIf, hab铆a trabajado muchas veces este t茅rmino, definitivamente estos cursos son muy buenos

Mi resumen:

<h1>*ngIf</h1>
<input type="text" required [(ngModel)]="person.name"  />
<!-- validamos la igualdad entre el campo y una cadena, si es true, que ejecute el parrafo -->
<!-- tambien validamos la edad, que sea igual a 18 -->
<p *ngIf="person.name === 'stiven' && person.age === 18">Soy stiven</p>
<!-- para hacer el else tenemos que agregarle a el 'p' un '; else' al final de la validacion
y el nombre del template a ejecutar tal cual se muestra a continuacion -->
<p *ngIf="person.name === 'julian' && person.age === 18; else elseBlock">Soy julian</p>

  <!-- este seria el bloque que se ejecutaria en caso de no ser true -->
<ng-template #elseBlock>
  <!-- El nombre del bloque else puede ser cualquiera seguido por signo '#' -->
  <p>Bloque de else</p>
</ng-template>