Angular nos ofrece muchas funcionalidades muy interesantes y poderosas, en muchas ocasiones no les sacamos todo el provecho que deberíamos. En este caso vamos a aprender un poco sobre la manera de usar ngClass, lo que nos servirá para manejar estilos de forma dinámica.
Vamos a trabajar en un ejemplo práctico y sencillo, pero que nos enseñará de forma clara como funciona esta interesante capacidad de Angular. Debo también aclarar que esto funciona solo en Angular moderno, así que no podemos usarlo en AngularJS. En esta primera versión de Angular necesitamos usarlo de forma diferente.
¿Qué es ngClass?
Cuando hablamos de HTML, una class es un parámetro en una etiqueta que hace referencia a un grupo de estilos que van a determinar la apariencia del elemento. Esto es HTML puro y se puede usar también en Angular poniendo en las etiquetas del HTML. Sin embargo cuando trabajamos en Angular tenemos una ventaja adicional, son las ngClass, que cumplen la misma función pero con más potencia, ya que podemos cambiar el valor de la clase de forma dinámica desde el TS.
La sintaxis es sencilla. Pero no consiste en un solo código, sino en varios códigos que se conectan. Una parte del código irá en el HTML, otra parte ira en el TS del componente y los estilos irán en el CSS del mismo componente. El código en el TS va a cambiar el valor de la clase. Sin embargo dicho así es muy difícil de entender, mejor hagamos un ejemplo.
¿Qué vamos a construir?
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.
Espero les hay servido este pequeño tutorial, si tienes cualquier duda puedes escribirlo en los comentarios y con gusto te ayudaré. Un abrazo y hasta la próxima.