Cómo usar ngIf en Angular 4.0

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

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

Juan C Felizzola

student•

En la component.ts:
personas: any = [
    {edad: 10, nombre: 'Suri'},
    {edad: 28, nombre: 'Mónica'},
    {edad: 18, nombre: 'Jennifer'},
    {edad: 20, nombre: 'Shirley'},
    {edad: 1, nombre: 'Bebé'},
    {edad: 18, nombre: 'Juan'}
  ];

Y en el component.html:
<ul>
    <ng-container *ngFor="let persona of personas">
        <li *ngIf="persona.edad >= 18">{{persona.nombre}}</li>
    </ng-container>
</ul>

Eduardo de la Cruz Ibarra

teacher•

Perfecto!

Gilberth Arias Araya

student•

Que editor de Texto estas utilizando?

Danny Velásquez

student•

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>```

Eduardo de la Cruz Ibarra

teacher•

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

Edgar Moises Valdez Faria

student•

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

student•

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

student•

lo descargue y me parece interesante el plugin

Patricio Jacho

student•

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  persons: any = [
    { age: 18, name: 'pepe' },
    { age: 17, name: 'pablo' },
    { age: 13, name: 'hugo' },
    { age: 44, name: 'paco' },
    { age: 15, name: 'luis' }
  ];

}

app.component.html

<ul>
  <ng-container *ngFor="let person of persons">
    <li *ngIf="person.age >= 18">{{person.name}}</li>
  </ng-container>
</ul>

Gerardo Gutiérrez

student•

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

student•

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

student•

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

student•

*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

student•

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

student•

<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

student•

BUena classes

Carlos Uriel de Jesus Sánchez González

student•

Muy buena directiva

Juan José Negris

student•

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

student•

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

student•

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

teacher•

Hola!, si es correcto.

David E Lares S

student•

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

Andrea Da Silva Pinto

student•

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

student•

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

student•

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

Diego Forero

Team Platzi•

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

student•

oye @GOLLUM23 donde tengo que ejecutar eso de ProdMode?

Harold David Hurtado Cortes

student•

++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

student•

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

Guido Varela Coletta

student•

.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

student•

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

Diego Forero

Team Platzi•

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

student•

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.

Cómo usar ngIf en Angular 4.0

Inicio del curso

Angular 4: configuración a despliegue profesional

Introducción a Angular 4

Versionamiento en Angular

Qué es Angular 4 y el salto de versiones

Typescript: qué es

Cómo monetizar una app directorio comercial

Setup del Ambiente de Trabajo

Herramientas de trabajo y Angular CLI

Generación y estructura de Angular 4

RETO: Haz un cambio simple en el proyecto.

Conceptos Básicos

Para qué nos sirven los Módulos y Componentes

Tipos de Data Binding y String Interpolation

Property Binding

Event Binding

ngModel y two way binding en Angular

Directivas en Angular 4 y ngFor

Cómo usar ngIf en Angular 4.0

Instalando librerías con NPM (Google Maps)

Directivas

ngStyle y ngClass en Angular: estilos condicionales

Directiva ngSwitch

Cómo crear directivas de atributo en Angular

Host Listeners

HostBinding en Angular: controla estilos desde directivas

Angular UI

Angular Material y Bootstrap

Configurando e implementando Bootstrap en nuestro proyecto

Ruteo

Qué hace el router en Angular 4

Implementación de Rutas en el Proyecto

Href vs router link: navegación angular

Resaltando el link activo con CSS para indicar visualmente en que componente nos encontramos

Parámetros de ruta con routerLink en Angular

Parámetros tipo Query

Creando una vista de detalle para el proyecto

Página de contacto Angular desde cero

Servicios

Servicios en Angular para compartir datos

Creando nuestro propio servicio

Configurando Firebase en nuestro proyecto

Guardando Records en Firebase

Obteniendo records desde Firebase

Obteniendo coordenadas usando Geocoding

Reto: Crear una vista para editar records

Mostrando marcadores en el Mapa de Google

Conexión Remota (Http y Sockets)

Funcionamiento de los llamados Http y Sockets

Qué es una arquitectura cliente - servidor

Enviando llamados tipo POST

Enviando llamados tipo GET

Formateando respuestas del servidor con el operador map()

Manejando errores HTTP

Pipes

Utilidad de los Pipes en Angular 4

Usando los pipes por defecto de Angular

Parámetros en pipes

Creando nuestro propio pipe

Animaciones en Angular

Configurando animaciones en nuestro proyecto

Transiciones

Callbacks

Solución al Reto: Añadiendo animaciones a nuestra aplicación

Testing en Angular

Introducción a unit tests

Configuración de testing por default

Corriendo los tests

Creando unit tests para componentes

Integración de Unit Test con Servicios

Autenticación y Protección de Rutas

Cómo funcionan los JSON Web Tokens

Preparación de vistas para login y registro

Registrando usuarios

Loggeando usuarios

Guardias canActivate en Angular: Proteger rutas con autenticación

Cómo integrar Facebook login con Firebase

Logout en Angular con Firebase

RxJS