JavaScript para principiantes: Asignación de clases dinámicas con ngClass

En las aplicaciones web es un requisito común adaptar la apariencia de un elemento basado en una condición. Hay algunas formas de lograr esto, pero si estás trabajando con Angular, tu elección está clara. La directiva ngClass proporciona una miríada de formas de asignar dinámicamente nombres de clase a elementos o componentes. Su sintaxis es concisa y a la vez soporta lógica bastante compleja para proporcionarnos un control detallado tanto sobre nuestros nombres de clase como sobre los criterios para establecerlos. En este tutorial, repasaremos algunas de las formas más comunes de asignar dinámicamente una clase CSS a un elemento utilizando la directiva ngClass.

Asignar una Clase CSS Usando la Propiedad [className] para el Vínculo de Propiedad

Aunque este artículo trata sobre la directiva ngClass, ¡vale la pena señalar que, en muchos casos, ni siquiera la necesitarás! Gracias al vínculo de propiedad [className], podemos establecer una clase a través de la propiedad nativa de JavaScript className, utilizando la sintaxis de vinculación []. Podemos ejecutar cualquier declaración dentro de ese vínculo que resulte en una cadena. Esto nos permite establecer una o más clases basadas en una condición:

<div [className]="isActive ? 'active-class' : 'inactive-class'"></div>

También podríamos construir el nombre de la clase en tiempo de ejecución:

<div [className]="'class' + someValue"></div>

Leer: 5 Conceptos de JavaScript que Todo Desarrollador Web Debería Aprender

Alternancia de Clases a través del Vínculo de Propiedad [className]

Algunos consideran que la técnica de alternancia de clases mencionada anteriormente es un poco más complicada de lo necesario, ya que la clase inactive-class probablemente sería la predeterminada. Si te encuentras en ese grupo, puedes emplear la sintaxis [class.class-name] para proporcionar una condición a evaluar:

<div 
  class="inactive" 
  [class.active]="isActive">
</div>

Entonces, si podemos establecer condicionalmente una clase usando la vinculación de propiedades [className], ¿por qué necesitamos la directiva ngClass? Como veremos, la verdadera razón para usar la directiva ngClass es que nos puede ayudar a elegir entre múltiples clases.

Una Inmersión Profunda en la Directiva ngClass

Antes de adentrarnos en cómo usar la directiva ngClass, sería instructivo ver su definición:

@Input('class')
klass: string

@Input()
ngClass: string | string[] | Set<string> | { [klass: string]: any; }

Observando el código anterior, ahora podemos ver que la sintaxis [class] que se usó anteriormente en realidad forma parte de la directiva ngClass, a través de @Input('class'). ¡También notemos que la directiva ngClass nos brinda nada menos que cuatro opciones para establecer clases dinámicas!

Veamos cada una de estas con más detalle.

Suministrando un string o string[]

Asignar un string o un array de strings a ngClass nos permite vincular clases dinámicas a variables de Angular. Supongamos que tuviéramos una variable llamada activeClass. Dentro de nuestro archivo .ts, podemos establecerla a un nombre de clase conocido como "text-success" o "text-failure" según el resultado de alguna operación:

<div 
  [ngClass]="activeClass">
</div>

La sintaxis de array es útil para aplicar múltiples clases al mismo elemento o componente:

<div 
  [ngClass]="[activeClass, openClass]">
</div>

Utilizando una Expresión Evaluada

Un método ligeramente más avanzado – pero altamente útil – de usar ngClass es proporcionar una expresión. La clase proporcionada solo se aplica si una variable o expresión se evalúa como true. Para suministrar una expresión, debes proporcionar un objeto usando llaves {}. A la izquierda de cada dos puntos – el nombre de la propiedad – está la clase que se aplicará; a la derecha – el valor de la propiedad – está la expresión o variable que deseas que se evalúe. Aquí tienes un ejemplo:

<!-- input box to toggle a variable to true or false -->
<input type="checkbox" [ngModel]="redText"> Toggle red text.
<input type="checkbox" [ngModel]="largeFont"> Toggle large text.

<div [ngClass]="{ 'text-red': redText, 'text-large': largeFont }">

Leer: React, Angular y Vue.js: ¿Cuál es la diferencia técnica?

Usando el operador ternario

El operador ternario te permite asignar un valor a una variable basado en una expresión booleana — ya sea un campo booleano, o una declaración que se evalúa a un resultado booleano. En su forma más básica, el operador ternario, también conocido como operador condicional, puede ser utilizado como una alternativa al enunciado if/then/else al establecer una variable.

Suministrar el operador ternario a ngClass nos permite especificar dos clases diferentes: una si una expresión es verdadera y otra para falsa. Aquí está la sintaxis básica para el operador ternario:

[ngClass]="expression or variable ? true class : false class"

Aquí tienes un código que emplea el operador ternario para establecer la clase de un DIV dependiendo de si dos variables son iguales o no:

<div [ngClass]="varA === varB ? 'css-class-1' : 'css-class-2'">

La Firma de ngClass Set<string>: No Deseada y No Amada

Set es una nueva estructura de datos introducida en ES6, similar a Map. Un Set en typescript nos permite almacenar valores distintos en una Lista utilizando métodos como add(), has() y delete(). Por alguna razón, la firma Set<string> ngClass nunca se popularizó realmente. Nunca lo he usado, ni conozco a nadie que lo haya hecho. 

Dicho esto, el Set debería contener cadenas que representen nombres de clases para aplicar al elemento o componente. Aquí tienes algo de código typescript que crea un Set llamado classes:

//Declarar una variable miembro de clase
public classes = new Set();
 
//Agregar nombres de clase
classes.add('active').add('text-large');

Conclusión

En este tutorial, repasamos algunas de las formas más comunes de asignar dinámicamente una clase CSS a un elemento utilizando la directiva ngClass. Como puedes ver, es bastante poderoso.