Class Binding en Angular

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

3 comentarios

  1. Every weekend i used to go to see this web page, for the reason that i wish for enjoyment, as this this web
    site conations in fact nice funny stuff too.

  2. Hello there! I could have sworn I’ve been to this site before but after checking through some of the post I realized it’s new to me.
    Anyhow, I’m definitely delighted I found it and I’ll be
    bookmarking and checking back frequently!

  3. Excellent post. I was checking continuously this blog and
    I’m impressed! Very helpful info specifically the last part 🙂 I care for such information much.
    I was looking for this particular info for a long time. Thank you
    and good luck. asmr https://app.gumroad.com/asmr2021/p/best-asmr-online asmr

Deja una respuesta

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

La Ley 34/2002 nos obliga a avisarte de que usamos cookies propias y de terceros con objetivos estadísticos y de sesión y para mostrarte la 'publi' que nos da de comer. Tranquilo, este mensaje solo sale una vez. Más información

Java desde 0 comunica a los usuarios, a través de este aviso, que puede utilizar cookies cuando el usuario navega por las diferentes pantallas y páginas del sitio. Durante el uso de nuestra página Web usted acepta y autoriza expresamente el uso de cookies, de acuerdo con nuestra Política de Privacidad. Este sitio web utiliza las siguientes cookies propias: - Cookies de sesión, para garantizar que los usuarios que escriban comentarios en el blog sean humanos y no aplicaciones automatizadas. De esta forma se combate el spam. Este sitio web utiliza las siguientes cookies de terceros: - Google AdManager y AdSense: Utiliza cookies para mejorar la publicidad. Entre otros fines, suelen utilizarse para segmentarla según el contenido que sea relevante para los usuarios o su ubicación, mejorar los informes de rendimiento de las campañas y evitar mostrar anuncios que los usuarios ya hayan visto. Las cookies no contienen información personal identificable. Consulta cómo utiliza Google la información de sitios web o aplicaciones. y cómo bloquear determinados anuncios. - Google Analytics: Almacena cookies para poder elaborar estadísticas sobre el tráfico y volumen de visitas de esta web. Al utilizar este sitio web está consintiendo el tratamiento de información acerca de usted por Google. Por tanto, el ejercicio de cualquier derecho en este sentido deberá hacerlo comunicando directamente con Google. - Redes sociales: Cada red social utiliza sus propias cookies para que usted pueda pinchar en botones del tipo Me gusta o Compartir.

Cerrar