En artículos anteriores ya hablamos sobre que es Data Binding, concretamente sobre String interpolation, Property binding y Class 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 Style Binding.

¿Qué es Style Binding?

Style Binding, es el mecanismo de data binding (envío de datos) mediante el cual vamos a establecer propiedades del objeto style mediante a las cuales podremos dar estilos a nuestros elementos de HTML. Esto lo realizaremos mediante al DOM.

¿De donde salen estos estilos de style? De las propiedades salen del DOM. Anteriormente ya habíamos trabajado con estás propiedades. Vamos a ver un ejemplo:

document.getElementById("myH1").style.color = "red";

Aunque actualmente la manera de trabajar es diferente:

<h1 [style.color] = "value">Titulo principal<h1>

Y el value en TypeScript definirá un color por ejemplo red.

Si vamos a W3Schools, podemos ver el listado al completo de las propiedades styles que podemos usar junto a su descripción:

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 añadiendo una sola propiedad con style binding

Si declaramos la variable active como true, podemos ver que nuestro título H1 aparece en rojo:

En cambio, si el valor de la variable es false, podemos ver que el elemento H1 cambia a azul:

Ejemplo añadiendo varias propiedades con style binding

Con Style binding, podemos trabajar sobre varias propiedades a la vez. Vamos a ver un ejemplo:

Nos vemos en la próxima lección. Saludos