Cómo usar ngIf en Angular 4.0

Contenido del curso

Inicio del curso

1
Angular 4: configuración a despliegue profesional
02:13 min

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

72
Publicando en Firebase Hosting
07:39 min

Fin del curso

73
Conclusión ¿Qué aprendimos en el curso?
01:20 min
74
Reto final del curso - realiza un nuevo modulo de PlatziSquare de acuerdo con las historias de usuario
01:25 min

Sesiones en vivo

Contenido Bonus

80
Actualización de angular, versión 6.0
04:25 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:003:04

Cómo usar ngIf en Angular 4.0

Curso de Angular 4

Clase 15 de 80

Clase 15 / 80

Recursos

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.

Danny Velásquez

Hace 9 años

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

Profesor

Hace 9 años

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

Edgar Moises Valdez Faria

Hace 9 años

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

Comentarios (20)20 comentarios

Juan C Felizzola

Gilberth Arias Araya

Teofilo Rosales Gama

Hace 8 años

Wilson Alejandro Gonzalez Gaitan

Patricio Jacho

Gerardo Gutiérrez

Roberto Adnier Nuñez Farfán

Jessie Buckland Pérez

Hace 7 años

Juan Esteban Deossa Pertuz

Milciades Vargas Liz

Anthony Grimaldo Juarez Solis

Cristian Palta

Carlos Uriel de Jesus Sánchez González

Juan José Negris

Diego Forero

Team Platzi

Víctor Hugo Rivas Sánchez

Andrea Angelica Fernandez Villa

Yesica Lizeth Cortés Pineda

David E Lares S

Andrea Da Silva Pinto

Irving Sarmiento

Noé Muñoz

Isaí Ramírez

Harold David Hurtado Cortes

Marcelo Fontana

Guido Varela Coletta

XAVIER MALDONADO

Alejandro García

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

Cómo funciona RxJS con metáfora de oficina