←back to Blog

Uso de ngClass en Angular + Ejemplo práctico

ngclass

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.

Hosting de calidad


Código de descuento: CC2024

3 respuestas a «Uso de ngClass en Angular + Ejemplo práctico»

  1. ≫ ¿Qué es Angular y para qué sirve? ⚡ | Código Correcto

    […] utilizando pequeñas líneas de código que forman parte directamente de Angular. Por ejemplo ngClass que te permite controlar la clase que tiene un elemento en el HTML del […]

  2. ¿Cómo instalar Angular y crear tu primer proyecto? | Código Correcto

    […] Podría interesarte: Uso de ngClass en Angular + Ejemplo práctico […]

  3. Avatar de Trino Amezquita
    Trino Amezquita

    Hola, estoy buscando la forma de aplicar un estilo a un elemento creado dinámicamente:
    este es el código que genera el nuevo elemento:
    manoini(jj){
    this.tablero1 = document.getElementById(‘tablero1’);
    var newImg = document.createElement(«img»);
    newImg.id = «tab1-«+jj;
    newImg.src = «./assets/images/fichas1/28.png»;
    newImg.classList.add(«ficha»);
    this.tablero1.append(newImg);
    }
    se crea sin problemas el elemento pero no puedo aplicar los estilos a la clase ficha.
    He buscado desde hace cuatro dias y no encuentro la solución.
    Gracias de antemano.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *