ngStyle y ngClass en Angular: estilos condicionales

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:006:18

ngStyle y ngClass en Angular: estilos condicionales

Curso de Angular 4

Clase 17 de 80

Clase 17 / 80

Recursos

Aprende a aplicar estilos condicionales en Angular 4 con claridad y confianza. Aquí verás cómo usar las directivas de atributo ngStyle y ngClass para destacar registros activos e intercalar estilos en una lista, apoyándote en ngFor y el index de iteración. Además, se recuerdan bases clave como string interpolation, property binding, event binding y two way data binding, así como el uso de librerías con MPM y Google Maps.

¿Qué aprenderás sobre ngStyle y ngClass en Angular 4?

Estas directivas permiten aplicar estilos y clases de forma dinámica según condiciones del componente. Se parte de una lista duplicada: una con filtros usando ngIf y otra sin filtro para mostrar todos los negocios, incluidos los inactivos. La idea es resaltar inactivos con ngStyle y alternar filas con ngClass.

ngStyle: directiva de atributo para modificar propiedades de CSS con expresiones.
ngClass: directiva de atributo para asignar clases completas de CSS.
ngFor: se obtiene el index para evaluar expresiones.
Operador ternario: decisión rápida para estilos condicionales.
Estados activos/inactivos: se usa una propiedad booleana como active.

¿Cómo aplicar estilos condicionales con ngStyle?

La meta es mostrar en gris los elementos inactivos y en negro los activos. Se usa la propiedad booleana active y un operador ternario dentro de un objeto de estilos.

¿Cuál es la sintaxis con corchetes, llaves y operador ternario?

Corchetes: indican property binding en la directiva de atributo.
Llaves: definen el objeto con la propiedad de CSS a modificar.
Operador ternario: elige el valor según la condición.

Ejemplo en la plantilla HTML:

<li
  *ngFor="let lugar of lugares"
  [ngStyle]="{ color: lugar.active ? 'black' : 'gray' }">
  {{ lugar.nombre }}
</li>

Claves prácticas:

color es una propiedad de CSS válida.
Si active es true: texto negro.
Si active es false: texto gris.

¿Cómo alternar clases con ngClass y usar el index de ngFor?

El objetivo es aplicar una clase cada dos elementos (uno sí y uno no) para mejorar la legibilidad. Se define una clase en styles.css y se evalúa una expresión con módulo usando el index de ngFor.

¿Cómo declarar la clase en styles.css?

En el archivo global de estilos se crea una regla con colores de fondo y texto:

.numero-par {
  background-color: aliceblue;
  color: blue;
}

¿Cómo evaluar la expresión con módulo y obtener el index?

Obtén el index de la iteración con ngFor.
Evalúa una condición con módulo para aplicar la clase a elementos alternados.

Ejemplo en la plantilla HTML:

<li
  *ngFor="let lugar of lugares; let i = index"
  [ngClass]="{ 'numero-par': (i + 1) % 2 !== 0 }">
  {{ lugar.nombre }}
</li>

Puntos clave:

let i = index: expone el número de iteración.
(i + 1) % 2 !== 0: alterna la clase entre registros (uno sí y uno no).
ngClass acepta una expresión y asigna la clase cuando la condición es verdadera.

Habilidades y conceptos reforzados:

Uso de directivas de atributo: ngStyle y ngClass.
Diferencia entre reglas puntuales de CSS y clases completas.
Integración con ngFor y su index para lógica de presentación.
Patrón de estilos condicionales con operador ternario.
Contexto previo: string interpolation, property binding, event binding, two way data binding, directivas estructurales y de atributo, instalación de librerías con MPM y uso de Google Maps.

¿Tienes dudas sobre otra directiva o quieres compartir tu implementación con ngSwitch y ngFor? Cuéntalo en los comentarios y seguimos la conversación.