Angular: Clases condicionales con ngClass

En el tutorial de hoy te llevaré a través del uso de estilos condicionales en Angular con la directiva ngClass y te mostraré muchas formas de aplicación súper útiles si estás empezando en Angular.

Angular

Por si eres completamente ajeno a este tema, te diré que Angular, es el framework JavaScript (TypeScript) de Google para construir aplicaciones web, móviles o de escritorio, tiene más de 71.000 estrellas en GitHub. Es mantenido por el equipo de Angular en Google y una serie de miembros de la comunidad y organizaciones. Además, si estás pensando en dedicarte a esto del desarrollo web, tienes que saber que Angular es uno de los frameworks de Javascript que tendrás que aprender para 2022 si quieres evolucionar favorablemente.

Antes de empezar

Para poder seguir la demostración de este artículo deberías disponer de lo siguiente:

1. Un entorno de desarrollo integrado como VS Code
2. La versión 11.0, mínimo, de Node instalada en tu máquina
3. Node Package Manager versión 6.7 o superior (suele venir con la instalación de Node)
4. Angular CLI versión 8.0 o superior
5. La última versión de Angular
6. Para este tutorial descargaremos este ejemplo básico para que puedas tener una base sobre la que trabajar.
7. Un conocimiento práctico del framework Angular a nivel de principiante

¡Comencemos!

Uso de clases CSS en Angular

Para dar estilo a los elementos de tu componente Angular, puedes simplemente utilizar CSS en el archivo, por ejemplo, style.css y definir todos tus estilos. También puedes utilizar CSS en línea como lo harías en cualquier página HTML. El párrafo siguiente tiene una clase verde:

<p class="green">Todos los cursos para principiantes son de color verde</p>

La hoja de estilo sería algo así:

.green {
    color: green;
}

Estilos condicionales

Ahora bien, el ejemplo anterior no es nada del otro mundo. Alguien con un mínimo conocimiento de frontend sabría hacerlo sin problema. Vayamos ahora a lo importante del asunto, lo que seguramente te trajo hasta aquí.

La forma más fácil de explicar el estilo condicional es con el comportamiento del ratón: cosas como el enfoque, el desplazamiento, el clic y la actividad. El proceso de definir reglas en tu hoja de estilo en función de una condición predefinida (en este caso, el comportamiento del ratón) se denomina estilo condicional. Los ejemplos ya mencionados se implementan de forma nativa en CSS utilizando las pseudoclases CSS del navegador. ¿Qué ocurre si quieres aplicar un estilo a un elemento en función de unas condiciones predefinidas que no están reservadas de forma nativa como pseudoclases CSS?

Estilo condicional ngClass

El equipo de Angular ha lanzado la directiva ngClass para ayudar a los desarrolladores a añadir y eliminar clases CSS en los elementos HTML. Hay tres formas de utilizar la directiva ngClass en función del tipo de evaluación de la expresión que quieras hacer:

A. En un String

En este caso, las clases CSS se enumeran en una string y se separan con espacios, como se haría en cualquier elemento HTML. La sintaxis es la siguiente

<some-element [ngClass]="'first second'">...</some-element>

B. En un Array

Al igual que en el caso del String, aquí se enumeran las clases CSS en un Array. La sintaxis es la siguiente:

<some-element [ngClass]="['first', 'second']">...</some-element>

C. En un Objeto

También puedes definir las clases que se aplicarán a un elemento con ngClass en un objeto. Las claves del objeto serán las clases CSS que se añaden cuando la expresión dada en el valor se evalúa como verdadera, en caso contrario se eliminan. Así es como se ve la sintaxis:

<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

Demo

Si has seguido este post desde el principio, habrás descargado y descomprimido el canvas de Angular desde GitHub. Veamos cómo funcionan en una aplicación real de Angular que imprime y estiliza cursos técnicos en un portal universitario. Carga la aplicación en tu entorno de desarrollo integrado (yo uso VS Code), y abre el archivo app.component.html y límpialo para que tenga este aspecto:

<div style="text-align:center">
  <h1> Welcome to the Ghetto Tech University </h1>
</div>
<app-courses></app-courses>
<router-outlet></router-outlet>

Para mantener la modularidad del proyecto, vamos a crear un nuevo componente y llamarlo «courses«. En tu terminal, ejecuta el siguiente comando:

ng generate component courses

Abre tu archivo courses.component.ts y sustituye el código que hay por el bloque de código que aparece a continuación:

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-courses',
  templateUrl: './courses.component.html',
  styleUrls: ['./courses.component.css']
})
export class CoursesComponent implements OnInit {
courses = [
    {
   'name': 'Introduction to Web Development',
   'level': 'Beginner'
 },
 {
   'name': 'Understanding APIs',
   'level': 'Intermediate'
 },
 {
   'name': 'Introduction to Docker Containers',
   'level': 'Advanced'
 },
 {
   'name': 'Understanding Time complexities',
   'level': 'Advanced'
 },
 {
   'name': 'Algorithms and Data Structures',
   'level': 'Advanced'
 },
 {
   'name': 'My first HTML page',
   'level': 'Beginner'
 },
 {
   'name': 'Ways to use CSS in your web page',
   'level': 'Beginner'
 },
 {
   'name': 'Introduction to Unit testing',
   'level': 'Intermediate'
 },
 {
   'name': 'What are PWAs',
   'level': 'Intermediate'
 }
 ];
 constructor() { }
 ngOnInit() {
  }
}

En este componente, he creado una array de objetos de todos los cursos técnicos y sus distintos niveles para el semestre. Lo siguiente es definir los distintos estilos que se necesitan para este ejercicio. Abre el archivo courses.component.css y pega en él las reglas CSS que aparecen a continuación:

.red{
    color: red;
}
.green {
    color: green;
}
.blue {
    color: blue;
}
.sizeup { 
    font-size: 25px; 
}

Ahora, para la presentación, ve al archivo courses.component.html y sustituye el contenido del marcador de posición por el bloque de código que hay dentro de él:

<p class="sizeup">
  Todos <span [ngClass]="'green'">los cursos para principiantes se colorean de verde</span>, todos <span class="blue">los intermedios 
  de azul</span> y todos <span class="red">los avanzados de rojo</span>.
</p>

Si ejecutas ahora la aplicación, verás que se reflejan todos los estilos, incluido el de la directiva ngClass.

Utilizando este mismo código de presentación, veamos cómo le irá si la definición es un array.

<p class="sizeup">
  Todos <span [ngClass]="['green']"> los cursos para principiantes se colorean de verde</span>, todos <span class="blue">los 
  intermedios de azul</span> y todos <span class="red">los avanzados de rojo</span>.
</p>

Cuando lo guardes y mires en tu navegador, tu aplicación seguirá siendo la misma, validando la definición del array. Ahora, para probar la definición del objeto, vamos a empezar con el mismo ejemplo:

<p class="sizeup">
  Todos <span [ngClass]="{'green': true}">los cursos para principiantes se colorean de verde</span>, todos <span class="blue">los
  intermedios de azul</span> y todos <span class="red">los avanzados de rojo</span>.
</p>

Esto imprime los párrafos con los distintos colores asignados. Para que esto sea aún más emocionante, vamos a hacer referencia a los cursos que guardamos al principio:

<p class="sizeup">
  Todos <span [ngClass]="{'green': true}">los cursos para principiantes se colorean de verde</span>, todos <span class="blue">los
  intermedios de azul</span> y todos <span class="red">los avanzados de rojo</span>.
</p>
<ul>
  <li *ngFor="let course of courses" 
  [ngClass]="{'green':course.level==='Beginner', 
             'blue':course.level==='Intermediate',
             'red':course.level==='Advanced',
             'sizeup':true}">
    {{ course.name }}
    </li>
</ul>

Aquí utilizamos la directiva ngFor para recorrer la lista y, a continuación, con la ngClass, especificamos exactamente que todos los cursos debían colorearse según nuestras condiciones predefinidas (los cursos para principiantes en verde, los intermedios en azul y los avanzados en rojo). Esto fue posible porque la clave del objeto es de tipo booleano, por lo que todo lo que está en el lado derecho tiene que devolver verdadero o falso. El estilo se aplica si es verdadero, y no se aplica cuando devuelve falso.

Conclusión

Este es un caso de uso de la directiva ngClass. Se puede utilizar en muchos escenarios, especialmente en aquellos que requieren que se estilice un elemento en función de una lógica predefinida. Este tutorial te ha introducido en el mundo del estilo condicional con ngClass en Angular. ¡Espero que te haya servido de mucho!