ngStyle y ngClass en Angular: estilos condicionales

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.