Angular 2, Conceptos Core: Data Bindings

Tras el primer artículo sobre Angular 2, llega el momento de empezar a conocer los conceptos cores del framework. En este artículo, te voy a explicar qué son los Data Bindings, cómo los utilizamos y los diferentes tipos que hay. ¿Estás listo?

¿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. Por eso, debes conocer cómo tratar los datos y su enlace con las vistas.

Partamos del ejemplo que te enseñé en el anterior artículo y vamos a crear una clase «Empleado». Para ello, agregamos una nuevo fichero ts al proyecto:

export  class Employed{
    public name:string;
    public lastName:string;
    public job: string;
    public year:number;
    
    constructor(name:string,lastName:string,job:string,year:number){
        this.name=name;
        this.lastName=lastName;
        this.job=job;
        this.year=year;
    }
}

A continuación, dentro de la clase del Componente,  crearemos una variable employed cuyo tipo será una Array de la Clase empleado creada anteriormente:

export class AppComponent { 
 public   employed:Array<Employed>;
  
 constructor(){
    this.employed.push(new Employed("Adrian","Diaz","Sofware Architect",1981));
    this.employed.push(new Employed("Alberto","Diaz","Head of Innovation",1979));
    this.employed.push( new Employed("Carlos","Lopez","Team Leades",1983));
    this.employed.push(new Employed("Juan Carlos","Martinez","Sofware Enginer",1986));
 }
}

Ahora, agregamos el html necesario para que se muestren los datos que hay en el componente:

<H1>Angular 2 by Encamina</H1>

Employed:

<ul>

<li *ngFor="#employe of employed">
        {{ employe.lastName }} , {{ employe.name }}
</li>

</ul>

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

Sintaxis Html 

Una de las cosas que no deja a nadie indiferente es la sintaxis que hay dentro del HTML. Por un lado, están las personas que consideran que extender HTML es una forma de mejorar la Web (ya que permite la reutilización de componentes y se puede ahorrar diversa funcionalidad). Pero hay otros que no opinan lo mismo y piensan que extender el estándar HTML sin seguir ningún criterio, no es una buena práctica.

En mi opinión, el extender el HTML es una buena opción, siempre que no tengamos ningún requisito que lo impida, como por ejemplo la accesibilidad.

De esa sintaxis, tenemos la etiqueta ngFor que, como habrás deducido, recorre todos los elementos que hay dentro de la variable. El «*» que hay al inicio de la instrucción ngFor indica que solamente se muestren los valores en caso de que dicha propiedad no sea nula.

Otra de las características que hay en este html son los valores que hay dentro de las llaves o (como se dice de forma coloquial) en los «mustaches». Esto lo que hace es mostrar el valor que tiene la variable.

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:

directives: [formDirectives]

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:

{{employe.name}}
<input [(ngModel)]="employe.name">

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).

Con este cambio lo que te he querido mostrar es:

• La flexibilidad que daba Angular 1 con la actualización de datos
• La mejora de su performance. Ahora no está permanentemente actualizando, sino que solamente se notifican los valores del modelo que realmente nos interesan (dejando mucha más responsabilidad al desarrollador).
  
  

Resumen

En este post, has visto:

• Cómo trabajar con datos dentro de nuestro Componente
• La sintaxis que tiene que tener el HTML
• Tipos de Data Binding existentes

En el próximo post, te hablaré sobre las Routes. ¿Con ganas de mi próximo post? 😛