ngStyle y ngClass en Angular: estilos condicionales

Resumen

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.

Pablo José

student•

También podemos usar las propiedades mágicas odd (par) y even (impar) para saber si el índice es par o impar.
Ejemplo, par:

<ng-container  *ngFor="let lugar of lugares;odd as esPar;" >
    <li [ngStyle]="{color: (lugar.active) ? 'black' : 'gray'}" [ngClass]="{numero_par: esPar}" >
        {{lugar.nombre}}
    </li>
</ng-container>

ó impar:

<ng-container  *ngFor="let lugar of lugares;even as esImpar;" >
    <li [ngStyle]="{color: (lugar.active) ? 'black' : 'gray'}" [ngClass]="{numero_par: esImpar}" >
        {{lugar.nombre}}
    </li>
</ng-container>

Alan Balderas Sánchez

student•

Está genial esa solución!
Sólo corrijo que even es “par” y odd es “impar” en español 😃

Pablo José

student•

Gracias Alan, si después me di cuenta de la traducción se me paso corregirlo, saludos!

Roberto Adnier Nuñez Farfán

student•

Si se desea poner varios estilos, se puede hacer como en la siguiente manera:

<li [ngStyle]="{color: (place.active) ? 'black' : 'gray', 'background-color': (place.active) ? 'transparent' : 'black'}">{{place.name}}</li>

Se debe prestar atención con las propiedades compuestas, como background-color, porque el compilador lo podrá entender como una operación entre dos variables y lanzará un error de plantilla. Por eso se debe poner entre comillas para que lo interprete como una cadena.

Mario Alejandro Cortez Salinas

student•

Si a alguien aún no le queda claro lo que son las directivas de atributo y estructurales este articulo lo explica muy bien
Resumen:

Estructurales: comienzan por asterisco y sirven para crear elementos en el DOM
Atributo: alteran la apariencia o comportamiento de un elemento del DOM ya existente

Carlos Alberto Villamizar Morantes

student•

No me funciona si el estilo de clase se llama .even-number. Con un guión medio

[ngClass]="{even-number: (i+1) % 2 === 0}"

Mensaje de error
Uncaught Error: Template parse errors:
Parser Error: Missing expected : at column 6 in [{even-number: (i+1) % 2 !== 0}] in ng:///AppModule/AppComponent.html@16:61 ("=“let place of places; let i = index”>

<li [ngStyle]="{color:(place.active) ? ‘black’: ‘gray’}" [ERROR ->][ngClass]="{even-number: (i+1) % 2 !== 0}">{{ }}</li> </ng-container> </ul> "): ng:///AppModule/AppComponent.html@16:61 Parser Error: Unexpected token } at column 30 in [{even-number: (i+1) % 2 !== 0}] in ng:///AppModule/AppComponent.html@16:61 ("=“let place of places; let i = index”> <li [ngStyle]="{color:(place.active) ? ‘black’: ‘gray’}" [ERROR ->][ngClass]="{even-number: (i+1) % 2 !== 0}">{{ }}</li> </ng-container> </ul>

Si la clase se renombra a .even_number y en el html también funciona correctamente. ¿A qué se debe este tipo de error?

yldemaro jimenez

student•

debe ser que no acepta el guion en css

Jose D. Vásquez

student•

Se debe escribir en formato CammelCase

Víctor Manuel Sarmiento Cayuelas

student•

Resumen:
ngStyle -> aplica un estilo definido dependiendo de una expresión.
ngClass -> aplica una clase css dependiendo de una expresión.

Javi Felices

student•

Quería intentar poner pares de un color e impares de otro, he usado dos veces ngClass sin éxito, hay que separarlo con “,”.

<ul>
  <ng-container *ngFor="let persona of personas; let i = index">
    <li [ngStyle]="{color: (persona.edad >= 18 ? 'orange': 'black')}" [ngClass]="{numero_par: (i + 2) % 2 != 0, numero_impar: (i + 2) % 2 == 0}">{{persona.nombre}}</li>
  </ng-container>
</ul>

Un saludo y gracias.

Carlos Ferrer

student•

Creo que la formula que se muestra en el video y que verifica si un número es par o impar creo que no es correcta, está invertida.
Si se verifica esta condición (i+1) % 2 !== 0 significa que la fila es impar y no par.
Lo correcto sería (i+1) % 2 == 0
De hecho en el video se marcan con el color de fondo las filas impares cuando deberían ser las pares.

Enrique Ortuno

student•

Asi es

Alan Fermin

student•

¿Porqué se declara i = index?

Noelia Iglesias Martínez

student•

Una vez levantado el proyecto no sé usar la consola, se queda un cursor que no lee los comandos que escribo. No sé como hacerla operativa de nuevo y mantener el servidor abierto, hay manera posible de hacer eso o tengo que usar otra consola por ejemplo para hacer mis git? Un saludo y gracias

Jaime Cárdenas Mesa

student•

se que en en linux se puede hacer añadiendo '&' al final,

cualquier_comando &

Cristian Palta

student•

buenas clases

Carlos Uriel de Jesus Sánchez González

student•

<ng-container *ngFor=“let lugar of lugares; let i = index” >

<li [ngStyle]="{color: (lugar.active) ? ‘black’ : ‘gray’}" [ngClass]="{numero\_par: (i + 1) % 2 !== 0 }" > {{lugar.nombre}} </li> </ng-container>

Alex Eugenio Gavidia Donayre

student•

Vine aquí para revisar a fondo el ngStyle Gracias !

Julio Isabel Martínez Leal

student•

Combinando con clases de bootstrap:

<li [ngStyle]="{color: (lugar.active) ? 'black' : 'gray'}" [ngClass]="{'bg-primary' : lugar.active, 'bg-secondary text-light' : !lugar.active}">{{lugar.nombre}}</li>

Leonardo Araoz

student•

App.component.ts :
personas:any=[
{nombre:‘Maria’, edad:18},
{nombre: ‘Roberto’, edad:32},
{nombre: ‘Ricardo’, edad:15},
{nombre: ‘Mariana’, edad:17}
]

app.component.

<ul> <ng-container \*ngFor=“let persona of personas”> <li \*ngIf=“persona.edad>=18”>{{persona.nombre}}</li> </ng-container> </ul>html:

Carlos capacho

student•

Eres tu bro 👍🏼

Pablo Pelaez

student•

Importante notar que las clases que creemos para estos propositos, no deben tener guiones medios en sus nombres, o al menos eso lo vi yo. Mientras que esto funciona:

<ul [ngClass]="{numero_par: isNumeroPar(i)}">{{persona.nombre}}</ul>

Esto genera un error sintactico:

<ul [ngClass]="{numero-par: isNumeroPar(i)}">{{persona.nombre}}</ul>

MARCO ANTONIO MEDINA DAVALOS

student•

Cada vez se pone más interesante

Rodolfo Sáenz

student•

Tuve que añadir !important a mi css para que tomara el color de letra

.numero_par {
    background-color: aliceblue;
    color: blue !important;
}

rlopez

student•

porque en este ejemplo no tiene efecto la regla css color: blue de la clase .numero_par

Roger Abarca

student•

color es solo para elementos de texto. Si quieres rellenar una caja, usa background:red; o si fuera el caso background-color:red; (este puede combinarse con background:url("imagen.jpg")); cambiando red por el color que quieras o codigo que color que desees

Luis Pena

student•

Tengo problemas con index. Cuando pongo i=index. No reconoce a index

Juan Carlos Ramirez Ustarroz

student•

checa el ; despues de terminar el for y el tambien la declaracion de la variable con let

Luis Pena

student•

Si ya verifique eso. Se gun entiendo i hace un llamado a una variable llamada index. El asunto es que no vi en que momento el declaro la variable index. Verifique la linea de codigo y no aparece nada.

<ng-container  *ngFor="let lugar of lugares;odd as esPar;" >
    <li [ngStyle]="{color: (lugar.active) ? 'black' : 'gray'}" [ngClass]="{numero_par: esPar}" >
        {{lugar.nombre}}
    </li>
</ng-container>

<ng-container  *ngFor="let lugar of lugares;even as esImpar;" >
    <li [ngStyle]="{color: (lugar.active) ? 'black' : 'gray'}" [ngClass]="{numero_par: esImpar}" >
        {{lugar.nombre}}
    </li>
</ng-container>

<ul>
  <ng-container *ngFor="let persona of personas; let i = index">
    <li [ngStyle]="{color: (persona.edad >= 18 ? 'orange': 'black')}" [ngClass]="{numero_par: (i + 2) % 2 != 0, numero_impar: (i + 2) % 2 == 0}">{{persona.nombre}}</li>
  </ng-container>
</ul>