En artículos anteriores ya hablamos sobre que es Data Binding, concretamente sobre String interpolation en Angular y sobre Property binding. Por lo que, si no conoces que es Data Binding, prefieres repasarlo o no lo tienes 100 % claro te aconsejo su lectura.

En el artículo de hoy, vamos a explicar cómo hacer Data Binding mediante al conocido como class binding.

¿Qué es Class Binding?

Class Binding, es el mecanismo de data binding (envío de datos) mediante el cual vamos a establecer una clase o un conjunto de clases que afectarán a nuestro elemento de HTML. Esto lo realizaremos mediante al DOM.

Creando un proyecto sobre el que realizar el ejemplo

Vamos a ver un ejemplo. Para ello, creamos e iniciamos un proyecto:

Una vez creado el proyecto, nos situamos en él y lo abrimos con VCS:

Y finalmente arrancamos el proyecto:

Lo que nos abrirá una ventana con nuestra template inicial del proyecto:

Ejemplo de cómo añadir una sola clase con class binding:

Si ahora revisamos la clase, podemos ver que hemos asignado la clase a nuestro elemento párrafo:

Si ahora le asignamos false, podemos ver que:

Se elimina la clase de la propiedad y por tanto, pierde las propiedades que le habíamos definido:

Ejemplo de cómo añadir varias clases con class binding:

En el hipotético caso que queramos añadir varias clases podemos hacer lo siguiente:

Y si miramos el resultado, podemos ver que tenemos dos clases, clase1 y clase2:

Espero que os haya gustado, nos vemos en próximas lecciones. Un saludo