Angular es un marco de desarrollo de aplicaciones web (Framework) que ha ganado una gran popularidad en el mundo del desarrollo web. Una de las características que hacen que Angular sea tan poderoso es su sistema de directivas, que permite manipular el DOM de manera dinámica y eficiente. Entre estas directivas, una de las más utilizadas y versátiles es ngClass. En este artículo, exploraremos qué es ngClass, cómo funciona y cómo puedes sacarle el máximo provecho en tus aplicaciones Angular.
Si eres completamente nuevo en Angular, te recomiendo ver el artículo donde muestro la como crear tu primer proyecto de Angular. Si ya puedes hacerlo pues no hay problema, podemos continuar. También, por seguridad, te recomiendo tener la documentación de Angular a mano, solo para ver si nada ha cambiado desde el momento que escribí este artículo.
¿Qué es ngClass?
En esencia, ngClass es una directiva que nos permite agregar o quitar clases CSS condicionalmente en elementos HTML. Esto significa que podemos controlar dinámicamente la apariencia de nuestros elementos en función de ciertas condiciones en nuestra aplicación Angular.
¿Cómo funciona ngClass?
Para entender cómo funciona ngClass, primero debemos comprender su sintaxis básica. La sintaxis de ngClass se parece a esto:
<div [ngClass]="{ 'clase-uno': condicionUno, 'clase-dos': condicionDos, ... }"></div>
Aquí, dentro del atributo [ngClass], proporcionamos un objeto JavaScript donde las claves son nombres de clases CSS y los valores son expresiones booleanas que indican si la clase debe aplicarse o no. Angular evalúa estas expresiones y aplica las clases correspondientes según el resultado.
Por ejemplo, supongamos que tenemos una variable esActivo en nuestro componente que indica si un elemento está activo o no. Podemos usar ngClass para aplicar una clase CSS llamada ‘activo’ cuando esActivo sea verdadero:
<div [ngClass]="{ 'activo': esActivo }"></div>
De esta manera, cuando esActivo sea true, la clase ‘activo’ se aplicará al elemento; de lo contrario, la clase se eliminará.
Angular ¿qué son @ngModules y cómo usarlos?
Modularizar nuestro código nos ayudará a que nuestra aplicación sea mucho más escalable
Ejemplo Práctico
Para ver ngClass en acción, consideremos un escenario común: una lista de elementos que pueden ser seleccionados por el usuario. Queremos que los elementos seleccionados se destaquen visualmente. Aquí está cómo lo haríamos con ngClass:
Supongamos que tenemos una lista de elementos en nuestro componente TypeScript:
export class AppComponent {
elementos = [
{ id: 1, nombre: 'Elemento 1', seleccionado: false },
{ id: 2, nombre: 'Elemento 2', seleccionado: true },
{ id: 3, nombre: 'Elemento 3', seleccionado: false }
];
}
Y aquí está cómo lo mostraríamos en nuestro HTML utilizando ngClass:
<ul>
<li *ngFor="let elemento of elementos" [ngClass]="{ 'seleccionado': elemento.seleccionado }">
{{ elemento.nombre }}
</li>
</ul>
En este ejemplo, para cada elemento en la lista, aplicamos la clase ‘seleccionado‘ si la propiedad seleccionado del elemento es true. Esto resalta visualmente los elementos seleccionados en la lista.
Usos Avanzados
ngClass también nos permite realizar operaciones más avanzadas, como combinar clases condicionalmente o aplicar clases basadas en expresiones más complejas. Por ejemplo, podemos combinar múltiples clases condicionalmente así:
<div [ngClass]="{ 'clase-uno': condicionUno, 'clase-dos': condicionDos, 'clase-tres': condicionTres }"></div>
Además, podemos usar expresiones de funciones o métodos en lugar de simples valores booleanos. Por ejemplo:
<div [ngClass]="obtenerClases()"></div>
Y en nuestro componente TypeScript:
obtenerClases() {
return {
'clase-uno': this.condicionUno,
'clase-dos': this.condicionDos
};
}
Esto nos da una flexibilidad aún mayor para controlar dinámicamente las clases CSS en nuestros elementos.
Hagamos un segundo ejemplo práctico de ngClass, un poco más visual
Vamos a hacer una aplicaciones en Angular que cambie la clase de un texto al dar clic en un botón. Vamos a internar entre dos clases, poniendo el texto en rojo y luego en azul. Esto lo vamos a hacer ejecutando una función que cambiará el valor de una variable que tendremos en el .ts del componente.
Para seguir el tutorial necesitarás saber hacer un proyecto en Angular. Ya sabes, hacer haber instalado el Angular CLI, crear un nuevo proyecto con el comando ng new my-proyect, ubicarnos en el archivo app-component.html y borrar todo el contenido. Cuando ya lo tengas todo borrado podemos continuar con el ejemplo.
Empecemos
Primero vamos a hacer el código de nuestro TS. Abrimos el app.component.ts y dentro de la clase AppComponent vamos a crear un variable. También crearemos una función para cambiar el valor, quedaría así:
flag = false;
cambiarFlag(){
this.flag = !this.flag;
}
Este código básicamente lo que hace es cambiar la variable «flag» cuando se ejecute la función cambiarFlag( ) la cual vamos a llamar desde un botón en nuestro HTML. Así que ahora trabajemos en el HTML, crearemos un elemento «p» en nuestro HTML app.component.html (al cual previamente debimos haber borrado todo el contenido), vamos a escribir el siguiente código:
<p [ngClass]="{'rojo': flag, 'azul': !flag}">
Hola
</p>
<button (click)="cambiarFlag()">Cambiar clase</button>
Básicamente lo que estamos haciendo es un párrafo que contiene [ngClass] el cual recibe un objeto. En el objeto decimos que se va a activar la clase «rojo» si la variable flag es verdadera y se usará la clase «azul» si la variable flag es falsa. Así que para cambiar su valor, tenemos un botón que llama a la función cambiarFlag().
Ahora que tenemos el cambio de variable, necesitamos crear los estilos, un estilo para la clase «rojo» y un estilo para la clase «azul». Así que vamos al archivo app.component.css y escribirmos lo siguiente:
.rojo{
background-color: red;
text-align: center;
color: white;
font-size: 25px;
}
.blue{
background-color: blue;
text-align: center;
color: white;
font-size: 25px;
}
Resultado
Como resultado podremos ver un párrafo con un color de fondo que va a cambiar entre rojo y azul cada vez que le demos clic al botón. Este es un ejemplo sencillo, pero te muestra claramente como funciona y todo el poder que tiene ngClass.
Está claro decir que está funcionalidad tiene mucho potencial, puedes por ejemplo activar una clase cuando un formulario no este validado o cuando un servicio http devuelva valores que no sean correctos. También cambiar todo el estilo de una página según la selección de un combo. La creatividad es el límite.
La directiva ngClass es una herramienta poderosa en el arsenal de un desarrollador Angular. Nos permite manipular dinámicamente las clases CSS de nuestros elementos HTML, lo que nos brinda una gran flexibilidad para crear interfaces de usuario interactivas y receptivas.
Ya sea para resaltar elementos seleccionados, cambiar estilos en respuesta a eventos o realizar cualquier otra manipulación de clases CSS, ngClass es una herramienta invaluable que todo desarrollador Angular debe dominar.
Espero que este artículo te haya dado una comprensión sólida de lo que es ngClass y cómo puedes aprovecharlo en tus proyectos Angular. ¡Ahora ve y domina Angular con ngClass!