Cursos Empresas Blog Live Conf Eventos Precios

0:003:04

Recursos

Resumen

Controla con seguridad qué se muestra en tu interfaz usando la directiva estructural ngIf en Angular 4.0. Aprende a ocultar elementos inactivos con un booleano, corrige atributos mal escritos y evita el error de combinar dos directivas en el mismo elemento HTML con ng-container.

¿Qué es ngIf y cómo oculta elementos según estado?

La directiva ngIf decide si un elemento se renderiza o no en función de una expresión booleana. Partimos de un arreglo en TypeScript con negocios que ahora incluyen un atributo activo. Si un negocio no está activo, no se muestra en la lista. Por ejemplo, Sushi Sushi Roll se desactiva y deja de verse.

Usa un atributo booleano: activo: true/false.
Muestra solo cuando lugar.activo sea verdadero.
Oculta automáticamente los inactivos.

¿Cómo se ve el arreglo en TypeScript?

// Cada objeto incluía solo nombre; agregamos "activo".
const negocios = [
  { nombre: 'Sushi Sushi Roll', activo: false },
  { nombre: 'Zapatería', activo: true },
  // ...otros negocios
];

¿Cómo se usa ngIf en la plantilla?

<!-- Mostrar solo si está activo -->
<li *ngIf="lugar.activo">{{ lugar.nombre }}</li>

Nota: si el IDE no reconoce el atributo, valida que el nombre coincida. Se corrigió de "active" a activo para que la expresión funcione.

¿Cómo evitar el error con dos directivas estructurales?

Angular indica que no se pueden aplicar dos directivas estructurales en el mismo elemento HTML. Si usas ngFor y ngIf juntos en el mismo <li>, verás ese error. La solución oficial es envolver el elemento con ng-container y mover allí el ngFor.

<ng-container *ngFor="let lugar of negocios">
  <li *ngIf="lugar.activo">{{ lugar.nombre }}</li>
</ng-container>

Un solo elemento con una directiva estructural.
ng-container no agrega nodos extra al DOM.
Se renderizan cinco de seis elementos tras filtrar el inactivo.
Si pones la zapatería en false, también desaparece.

¿Qué sintaxis y detalles debes cuidar?

Las directivas estructurales en Angular usan asterisco y están en camelCase. Solo necesitas una expresión que evalúe a verdadero o falso para controlar la visibilidad.

Empieza con asterisco (*): por ejemplo, *ngIf.
Usa camelCase: ngIf, ngFor.
Proporciona una expresión booleana: lugar.activo.
Verifica nombres de atributos: "active" vs activo.
Evita dos directivas estructurales en el mismo elemento: usa ng-container.

¿Has aplicado otros patrones con ngIf para mejorar la UI? Comparte tus ideas y dudas en los comentarios.

Cómo usar ngIf en Angular 4.0

Curso de Angular 4

Clase 15 de 80

Clase 15 / 80

Comentarios (20)20 comentarios

Juan C Felizzola

Hace 9 años

Eduardo de la Cruz Ibarra

Profesor

Perfecto!

Gilberth Arias Araya

Que editor de Texto estas utilizando?

Danny Velásquez

Que diferencia hay entre un contenedor normal como un div o span y ng-container, digo esto porque el funcionamiento con cualquiera de los 3 no parece cambiar en la parte visual

 <ul >
  <span *ngFor="let lugar of lugares">
    <li *ngIf="lugar.active" >{{lugar.nombre}}</li>
  </span>
  </ul>```

<ul > <ng-container \*ngFor=“let lugar of lugares”> <li \*ngIf=“lugar.active” >{{lugar.nombre}}</li> </ng-container> </ul>```

ng-container no te agrega más jerarquía en el DOM, a diferencia de los otros dos que mencionas.

Edgar Moises Valdez Faria

ng-container no se pinta en la vista al renderearse,
a lo que voy es que esto:

<ng-container *ngFor=“let lugar of lugares”>
<li *ngIf=“lugar.active” >{{lugar.nombre}}</li>
</ng-container>

se traduce en esto:

<li >Lugar 1</li>
<li >Lugar 2</li>
.....

En cambio con el div esto:

<div *ngFor=“let lugar of lugares”>
<li *ngIf=“lugar.active” >{{lugar.nombre}}</li>
</div>

se traduce a:

<div>
<li >Lugar 1</li>
</div>
<div>
<li >Lugar 2</li>
</div>
.....

O sea que usando un div agregamos elementos al DOM, en cambio con ng-container no recargamos el DOM

Teofilo Rosales Gama

Hace 8 años

Usen visual studio code e instalen un plugin llamado
Auto Import para el atocompletado de componentes php storm es el que utilizan pero es de pago visual studio code es gratis

Wilson Alejandro Gonzalez Gaitan

lo descargue y me parece interesante el plugin

Patricio Jacho

Gerardo Gutiérrez

hice esto con bandas de metal lml :

  bandas:anny =[
  	{ nombre: 'Cannibal Corspe', genero:'Brutal_Death_Metal'}
  	{ nombre: 'Vader', genero:'Brutal_Death_Metal'}
  	{ nombre: 'Abobinable putrefaction', genero:'Brutal_Death_Metal'}
  	{ nombre: 'Cannabis Corspe', genero:'Brutal_Death_Metal'}
  	{ nombre: 'Six feet under', genero:'Death_Metal'}
  ];

y en html

<ng-container *ngFor="let banda of bandas">
    <li *ngIf="banda.genero=='Brutal_Death_Metal'" >{{banda.nombre}}</li>
 </ng-container>

Roberto Adnier Nuñez Farfán

ng-container también es útil para la manipulación de los elementos option de la etiqueta select. Por ejemplo:

<select [(ngModel)]="hero">
  <ng-container *ngFor="let h of heroes">
    <ng-container *ngIf="showSad || h.emotion !== 'sad'">
      <option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>
    </ng-container>
  </ng-container>
</select>

Jessie Buckland Pérez

Hace 7 años

En el caso de querer separar varias directivas, ¿se anidan los ng-container? o ¿existe alguna práctica mas eficiente si tengo que comparar por ejemplo 6 propiedades de un objeto?.

Juan Esteban Deossa Pertuz

*ngIf=”booleanValue” : El *ngIf nos permite desplegar la información si su valor es verdadero o si se cumple la condición que esta tiene como valor. Ejemplo:

<ul> <ng-container *ngFor=”let persona of personas”> <li *ngIf=”persona.viva” >{{persona.nombre}}</li> </ng-container> </ul>

Milciades Vargas Liz

lugares:any = [
    {active:true, nombre:'Pagina 1'},
    {active:true, nombre:'Pagina 2'},
    {active:false, nombre:'Pagina 3'},
    {active:true, nombre:'Pagina 4'},
    {active:true, nombre:'Pagina 5'},
    {active:true, nombre:'Pagina 6'}
  ];

  <ul>
    <ng-container *ngFor="let lugar of lugares">
      <li *ngIf="lugar.active">{{lugar.nombre}}</li>
    </ng-container>
  </ul>

Anthony Grimaldo Juarez Solis

<div style="text-align: center;">
  <ul>
    <ng-container *ngFor="let lugar of lugares">
      <li *ngIf="lugar.active">{{ lugar.nombre }}</li>
    </ng-container>
  </ul>
</div>

  lugares: any = [
    {
      nombre: "item 1",
      active: true
    },
    {
      nombre: "item 2",
      active: false
    },
    {
      nombre: "item 3",
      active: true
    }
  ];

Cristian Palta

BUena classes

Carlos Uriel de Jesus Sánchez González

Muy buena directiva

Juan José Negris

Hola. Espero alguien me pueda atudar con esta duda. Quisiera entender porqué el *ngIf indica lugar.active y no lugares.active, siendo que lugares es el nombre del Array. Es esto porque hemos ejecutado ya el ngFor y guardado las valores del array en variables? En el caso de que no hubiesemos hecho el ngFor como sabría angular que lugar.active esta refiriendo a los objetos contenidos en el array lugares? Muchas gracias. Saludos

Diego Forero

Team Platzi

Como lo mencionas es porque se usa el ngFor, si no iteras no hay forma de representar y saber que objeto estas representando, siempre que tienes un array debes iterarlo para poder interactuar con cada elemento.

Víctor Hugo Rivas Sánchez

Recuerda que estás recorriendo cada objecto "lugar" del arreglo "lugares". Entonces, necesitas indicar la propiedad de cada elemento lugares: lugar.nombre, lugar.active, etc.

Andrea Angelica Fernandez Villa

Esta validacion es correcta? Quiero que me muestre el enlace si infome.valor4 es diferente de vacio

<td *ngIf=" !informe.valor4>
	<a href="#">Enlace</a>
</td>

Yesica Lizeth Cortés Pineda

Hola!, si es correcto.

David E Lares S

te faltaría cerrar la expresión con el ", pero es algo lógico.

Andrea Da Silva Pinto

Una pregunta, existe el equivalente a ‘else’ para el ngIf?

Quería hacer algo así:

personas: any = [
{edad: 13, nombre: “Clarissa”},
{edad: 15, nombre: “Anniah”},
{edad: 17, nombre: “Helena”},
{edad: 23, nombre: “Andrea”},
{edad: 21, nombre: “Daniela”},
{edad: 16, nombre: “Fabiana”},
];

<ng-container *ngFor=“let persona of personas”>

<li \*ngIf=“persona.edad >= 18”>{{persona.nombre}} tiene {{persona.edad}} anhos y es mayor de edad.</li> <li \*ngIf=“persona.edad < 18”>{{persona.nombre}} tiene {{persona.edad}} anhos y es menor de edad. NO PUEDE INGRESAR AL BAR</li> </ng-container>

Así me funciona pero creo que es código innecesario o redundante

Irving Sarmiento

Una forma de realizarlo, lo veo de esta manera:

<ng-container *ngFor="let persona of personas">
  <li *ngIf="persona.edad>= 18; else otraopcion">{{persona.nombre}} tiene {{persona.edad}} años y es mayor de edad.</li>
  <ng-template #otraopcion><li>{{persona.nombre}} tiene {{persona.edad}} años y es menor de edad. NO PUEDE INGRESAR AL BAR</li></ng-template>
</ng-container>

De esta forma implementas el *ngIf y else, si no se cumple la primera opción, mostrará lo que hay en el tag ng-template que tenga el nombre de la id que estamos colocando en el else.

Noé Muñoz

Qué debo hacer? pues me sale esto en consola: Angular is running in the development mode. Call enableProdMode() to enable the production mode.

Solo te esta informando que estas en modo de desarrollo, para enviar a producción tu aplicación debes ejecutar enableProdMode() para que deje todo en modo de producción. No es un error solo es informativo.

Isaí Ramírez

oye @GOLLUM23 donde tengo que ejecutar eso de ProdMode?

Harold David Hurtado Cortes

++app.component.ts++

Personas : any = [ {Nombre: 'Juan Tamariz', Edad: '23'}, {Nombre: 'Ema Madera de Gallo', Edad: '42'}, {Nombre: 'Omar Motta', Edad: '33'}, {Nombre: 'Elsa Patero', Edad: '50'}, {Nombre: 'Gustavo Racho', Edad: '63'}, {Nombre: 'Elsa Badillo', Edad: '9'} ];

App.component.html

<ul> <ng-container *ngFor="let persona of Personas"> <li *ngIf="persona.Edad>=34">{{persona.Nombre}}</li> </ng-container> </ul>

Marcelo Fontana

Importante
<ng-container> -> se comporta similar al <div> pero a diferencia de este último no agrega elementos al DOM

Guido Varela Coletta

.ts

  locales = [
  	{abre:9,cierra:18,nombre:'Ferreteria'},
  	{abre:8,cierra:18,nombre:'Zapateria'},
  	{abre:6,cierra:17,nombre:'Churreria'},
  	{abre:11,cierra:21,nombre:'Fiambreria'}
  ];

HTML

		<ng-container *ngFor="let locales of locales">
			<li *ngIf='locales.abre > 7 && locales.cierra < 19'>
				<!-- *ngIf='condicion' -->
				{{locales.nombre}}, desde las {{locales.abre}}, hasta las {{locales.cierra}}
			</li>
		</ng-container>

XAVIER MALDONADO

disculpen, alguien sabe como le hace para escribir en varias lineas al mismo tiempo?

En los IDE’s de jetbrains como phpstorm puedes usar el siguiente.

Primero presionas shift + alt + insert esto te pasara el modo de selección de columna, luego simplemente con shift y el cursos hacia arriba o abajo seleccionas las lineas.

Otra opción es usar alt + j este permite seleccionar la siguiente ocurrencia de la palabra que esta seleccionada inicialmente.

Alejandro García

Para VisualStudtioCode es simplemente manteniendo pulsado la tecla “Alt” y haciendo click allá donde quieres tener el cursor multiplicado. Luego ya puedes escribir o borrar de manera normal.

Recursos

Resumen

Cómo usar ngIf en Angular 4.0

Progreso del curso

Inicio del curso

Introducción a Angular 4

Setup del Ambiente de Trabajo

Conceptos Básicos

Directivas

Angular UI

Ruteo

Servicios

Conexión Remota (Http y Sockets)

Pipes

Animaciones en Angular

Testing en Angular

Autenticación y Protección de Rutas

RxJS

Publicando nuestro proyecto

Fin del curso

Sesiones en vivo

Contenido Bonus