En el artículo anterior de String interpolation en Angular ya hablamos sobre Data Binding. Por lo que, si no conoces este termino, prefieres repasarlo o no lo tienes 100 % claro te aconsejo su lectura.

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

¿Qué es Property Binding?

Property Binding es el mecanismo de data binding (envío de datos) mediante el cual vamos a establecer las propiedades de los elementos o directivas de HTML que estén disponibles en el 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 el y lo abrimos con VCS:

Y finalmente arrancamos el proyecto:

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

Ejemplo con String interpolation

Si a nuestro app.component.ts le añadimos el siguiente objeto:

La web la hemos cogido desde el buscador, os aconsejo buscar una imagen pequeña:

Si realizamos lo siguiente:

Podemos ver que funciona, pero que estamos utilizando string interpolation en la template:

Ejemplo de Property binding

En cambio, si realizamos el mismo ejemplo utilizando property binding, podemos ver que en la template utilizamos los [] para englobar a la propiedad que vamos a utilizar y comillas dobles «» para englobar a la propiedad del objeto (o a la variable que queramos usar).

Si vamos al navegador, podemos ver que el resultado será el mismo:

Ejemplo de botón con Property binding

Vamos a ver un ejemplo en el que deshabilitamos y habilitamos un botón:


Como podéis ver es property binding es una alternativa al string interpolation cuando queremos trabajar con propiedades disponibles en el DOM.

Aunque no es mejor ni peor, sino como acabamos de decir una alternativa, si que os aconsejo utilizarla para definir propiedades del HTML y utilizar string interpolation para mostrar valores.

Ya que trabajando de manera cada binding hace una función. String interpolation, mostrar datos, property binding trabajar con las propiedades y eso nos ayudará a que quede más claro para los desarrolladores. Que sea una buena práctica  no significa que no podamos utilizar string interpolation como en el primer ejemplo que hemos visto para trabajar con las propiedades de un elemento de HTML. Un saludo