¿Qué son los Data Binding?

Los “Data Bingdings” o enlace de datos es una técnica general que une una fuente de datos entre
el origen de datos y las vista, y se encarga de sincronizarlos. Esto provoca que cada cambio de
datos se refleje automáticamente en los elementos que están sincronizados. Existen librerias
Javascript cuya unica función es el encargado de los binding entre el “Modelo” y la “Vista”, por
ejemplo KnockoutJS.

En Angular 2, los databinding son la sincronización automática de los datos entre los componentes
del modelo y la vista. La vista es una proyección del modelo en todo momento. Cuando el modelo
cambia, la vista refleja el cambio, y viceversa.

vamos a crear una clase “Empleado”. Para ello, agregamos un nuevo fichero ts al proyecto:

A continuación, dentro de la clase del Componente, crearemos una variable employed cuyo tipo
será una Array de la Clase empleado creada anteriorente:
Ahora, agregamos el html necesario para que se muestren los datos que hay en el componente:

Si ejecutas la aplicación, se mostrará la siguiente pantalla:

Tipos de Binding de datos

Hay dos tipos de enlaces. Pueden ser “one way” o de “two way”.

One Way
Hablando claro, One Way significa que el enlace solamente se realiza en una única dirección. Es
decir, la vista recibe los datos una única vez y, aunque se produzca alguna modificación de los
datos, estos no se modifican. La mayoría de los sistemas de plantillas de datos se unen en una sola
dirección: se funden los componentes de la plantilla y modelo juntos en una vista. Después de
producirse la fusión , los cambios en el modelo o secciones relacionadas de la vista no se reflejan
automáticamente en la vista. O algo aún peor, los cambios que el usuario hace a la vista no se
reflejan en el modelo. Esto significa que el desarrollador tiene que escribir el código y se sincroniza
constantemente la vista con el modelo y el modelo con la vista.

Two Way In
Este tipo de binding es de dos vías y se suele utilizar para los formularios, de tal forma que en el
momento de actualizar cualquier elemento se actualizan todos los elementos. Pero en Angular
estas plantillas funcionan de una forma diferente. Primero el template (que es el HTML sin
compilar junto con etiquetas o directivas adicionales), se compila en el navegador. El paso de
compilación produce una vista en vivo. Cualquier cambio a la vista se refleja inmediatamente en el
modelo y cualquier cambio en el modelo se propaga a la vista. En Angular 1 esto era una de sus
grandes ventajas. Ahora en la nueva versión, hay que indicarlo en la sintaxis. Para hacerlo, debes
utilizar el ngModel.

Two-Way Binding con el ng-Model

Esta es una de las novedades que trae Angular. NgModel es una directiva de Angular 2 cuya
finalidad es actualizar los valores que hay en los formularios una vez se realizan cambios. Vamos a
ver un ejemplo para entenderlo mejor.

En primer lugar, en el componente debemos importar esta directiva de la siguiente forma:

Para indicar en el html que un determinado elemento del modelo se refresque, tendremos que
poner [(ngModel)] y el valor que queremos que se actualice:

Si ahora ejecutamos este código, verás automáticamente que cada vez que se escribe cualquier
valor en el formulario, se modifica el valor en todos los elementos donde se está mostrando este
dato (facilitando mucho la vida del desarrollador)

E-grafía
http://blogs.encamina.com/desarrollandosobresharepoint/2016/01/19/angular-2-bindings/

Comentario
Con lo que pudimos leer el data binding es un mecanismo que enlaza los
elementos de la interfaz con la parte en la que se arma la información a
mostrar. En pocas palabras, es el enlace entre el front y el back de nuestra
web.
Conclusión
Esto es lo que hace AngularJS. Hace que el modelo y la vista sincronicen sus
datos en dos vías. De uno al otro o viceversa. Y la plantilla (que es el HTML sin
compilar junto con cualquier opción adicional o alguna directiva) se compila
en el navegador para conseguir la vista.