Tipos de databinding en Angular

Entendemos por databinding como la técnica por la que se une una fuente de datos entre un origen de datos y la vista, y se encarga de sincronizarlos.  En Angular2, los databinding son la sincronización automática de los datos entre los componentes del modelo y la vista.

Hay principalmente 4 tipos de databinding en Angular, que son:

1. Interpolation. Permite mostrar información en el template desde el typescript. Se representa por una doble llave abierta y su correspondiente cierre, es decir, algo similar al siguiente ejemplo:



En el ejemplo anterior podemos observar como tenemos declarada una variable privada que se llama "name" y que mostramos mediante interpolation en el template html.

2. Property binding. tambien conocido como one way databinding es utilizado para enviar informacion de los datos a la vista, en concreto con propiedades de componentes, elementos HTML y directivas. Veamos un ejemplo:



En el ejemplo anterior, enlazamos las propiedades href y textContent del elemento <a> del template con la información del objeto website que hemos definido en el typescript.

3. Event binding. se usa para manejar la reacción a eventos generados por el usuario.



En el ejemplo anterior se dispara el evento "click" desde el template al código que ejecutará la lógica de negocio.

 4. Two way data binding. Sin lugar a dudas es el más conocido de todos. Combina el binding de entrada y salida en una sola notación utilizando la directiva ngModel. Se representa por lo que se conocce como "banana in a box" [()]


<input [(ngModel)]="name" >

lo que viene a ser equivalentepara Angular a:

<input [ngModel]="name" (ngModelChange)="name=$event">



En el ejemplo anterior según cambiamos el valor del textbox se modifica el valor de la variable "name" y viceversa. De ahí lo de "two way databinding".

Espero con esta entrada que haya quedado un poco más claro los tipos de databinding que existen en Angular.

Hasta la próxima entrada.

Código fuente disponible en https://stackblitz.com/edit/ng-databinding