{"id":2101,"date":"2016-01-19T11:00:50","date_gmt":"2016-01-19T10:00:50","guid":{"rendered":"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/?p=2101"},"modified":"2016-01-19T11:34:46","modified_gmt":"2016-01-19T10:34:46","slug":"angular-2-bindings","status":"publish","type":"post","link":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/angular-2-bindings\/","title":{"rendered":"Angular 2, Conceptos Core: Data Bindings"},"content":{"rendered":"

Tras el primer art\u00edculo sobre Angular 2, llega el momento de empezar a conocer los conceptos cores del framework<\/strong>. En este art\u00edculo, te voy a explicar qu\u00e9 son los Data Bindings, c\u00f3mo los utilizamos y los diferentes tipos que hay. \u00bfEst\u00e1s listo?<\/p>\n

\"Untitled-3\"<\/p>\n

\u00bfQu\u00e9 son los Data Binding?<\/h2>\n

<\/p>\n

Los \u00abData Bingdings\u00bb o enlace de datos es una t\u00e9cnica general que une una fuente de datos entre el origen de datos y las vista<\/strong>, y se encarga de sincronizarlos. Esto provoca que cada cambio de datos se refleje autom\u00e1ticamente en los elementos que est\u00e1n sincronizados.\u00a0Existen librerias Javascript cuya unica funci\u00f3n es el encargado de los binding entre el \u00abModelo\u00bb y la \u00abVista\u00bb, por ejemplo\u00a0KnockoutJS<\/a>.<\/p>\n

En Angular 2, los databinding son la sincronizaci\u00f3n autom\u00e1tica de los datos<\/strong> entre los componentes del modelo y la vista. La vista es una proyecci\u00f3n del modelo en todo momento. Cuando el modelo cambia, la vista refleja el cambio, y viceversa. Por eso, debes\u00a0conocer c\u00f3mo tratar los datos y su enlace con las vistas.<\/p>\n

Partamos del ejemplo que te ense\u00f1\u00e9\u00a0en el anterior art\u00edculo<\/a>\u00a0y vamos a crear una clase \u00abEmpleado\u00bb. Para ello, agregamos una nuevo fichero ts al proyecto:<\/p>\n

 <\/p>\n

\r\nexport  class Employed{\r\n    public name:string;\r\n    public lastName:string;\r\n    public job: string;\r\n    public year:number;\r\n    \r\n    constructor(name:string,lastName:string,job:string,year:number){\r\n        this.name=name;\r\n        this.lastName=lastName;\r\n        this.job=job;\r\n        this.year=year;\r\n    }\r\n}\r\n<\/pre>\n
 <\/p>\n
A continuaci\u00f3n, dentro de la\u00a0clase del Componente, \u00a0crearemos una variable employed<\/strong> cuyo tipo ser\u00e1 una Array de la Clase empleado creada anteriormente:<\/p>\n
 <\/p>\n
\r\nexport class AppComponent { \r\n public   employed:Array&amp;amp;amp;lt;Employed&amp;amp;amp;gt;;\r\n  \r\n constructor(){\r\n    this.employed.push(new Employed("Adrian","Diaz","Sofware Architect",1981));\r\n    this.employed.push(new Employed("Alberto","Diaz","Head of Innovation",1979));\r\n    this.employed.push( new Employed("Carlos","Lopez","Team Leades",1983));\r\n    this.employed.push(new Employed("Juan Carlos","Martinez","Sofware Enginer",1986));\r\n }\r\n}\r\n<\/pre>\n
 <\/p>\n
Ahora, agregamos el html necesario<\/strong> para que se muestren los datos que hay en el componente:<\/p>\n
 <\/p>\n
\r\n\r\n&amp;amp;lt;H1&amp;amp;gt;Angular 2 by Encamina&amp;amp;lt;\/H1&amp;amp;gt;\r\n\r\nEmployed:\r\n\r\n<ul>\r\n\r\n<li *ngFor="#employe of employed">\r\n        {{ employe.lastName }} , {{ employe.name }}\r\n<\/li>\r\n\r\n<\/ul>\r\n\r\n<\/pre>\n
 <\/p>\n
Si ejecutas la\u00a0aplicaci\u00f3n, se mostrar\u00e1 la siguiente pantalla:<\/p>\n
 <\/p>\n
\"angular2\"<\/p>\n
<\/h2>\n
Sintaxis Html\u00a0<\/strong><\/h2>\n
Una de las cosas que no deja a nadie indiferente es la sintaxis que hay dentro del HTML. Por un lado, est\u00e1n las personas que consideran que extender HTML es una forma de\u00a0mejorar la Web (ya que permite la reutilizaci\u00f3n de componentes y se puede ahorrar diversa funcionalidad). Pero hay otros que no opinan lo mismo y\u00a0piensan que extender el est\u00e1ndar HTML sin seguir ning\u00fan criterio, no es una buena pr\u00e1ctica.<\/p>\n
En mi opini\u00f3n, el extender el HTML es una buena opci\u00f3n,<\/strong> siempre que no tengamos ning\u00fan requisito que lo impida, como por ejemplo la accesibilidad.<\/p>\n
De esa sintaxis, tenemos la etiqueta ngFor<\/strong> que, como habr\u00e1s\u00a0deducido, recorre todos los elementos que hay dentro de la variable. El \u00ab*\u00bb que hay al inicio de la instrucci\u00f3n ngFor indica que\u00a0solamente se muestren los valores en caso de que dicha propiedad no sea nula.<\/p>\n
Otra de las caracter\u00edsticas que hay en este html son\u00a0los valores que hay dentro de las llaves o (como se dice de forma coloquial) en los \u00abmustaches\u00bb<\/strong>. Esto lo que hace es mostrar el valor que tiene la\u00a0variable.<\/p>\n
Tipos de Binding de datos<\/h2>\n
Hay dos tipos de enlaces<\/strong>. Pueden ser \u00abone way\u00bb o de \u00abtwo way\u00bb.<\/p>\n
\"\"One Way<\/h3>\n
Hablando claro,\u00a0One Way significa que el enlace solamente se realiza en una \u00fanica direcci\u00f3n. <\/strong>Es decir, la vista recibe los datos una \u00fanica vez y, aunque se produzca alguna modificaci\u00f3n de los datos, estos no se modifican. La mayor\u00eda de los sistemas de plantillas de datos se unen en una sola direcci\u00f3n: se funden los componentes de la plantilla y modelo juntos en una vista. Despu\u00e9s de producirse la fusi\u00f3n , los cambios en el modelo o secciones relacionadas de la vista no se reflejan autom\u00e1ticamente en la vista. O algo a\u00fan 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\u00f3digo y se sincroniza constantemente la vista con el modelo y el modelo con la vista.<\/p>\n
\"\"Two Way In<\/h3>\n
Este tipo de binding es de dos v\u00edas y se suele utilizar para los formularios, <\/strong>de\u00a0tal forma que en el momento de actualizar cualquier elemento se actualizan todos los elementos. Pero en Angular estas plantillas funcionan de una forma diferente<\/strong>. Primero el template (que es el HTML sin compilar junto con etiquetas o directivas adicionales), se compila en el navegador. El paso de compilaci\u00f3n 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\u00f3n, hay\u00a0que indicarlo en la sintaxis. Para hacerlo, debes utilizar el ngModel.<\/p>\n
Two-Way Binding con el ng-Model<\/h2>\n
Esta es una de las novedades<\/strong> que trae Angular. NgModel es una directiva de Angular 2 cuya finalidad es actualizar los valores que hay en los formularios<\/strong> una vez se realizan cambios. Vamos a ver un ejemplo para entenderlo mejor.<\/p>\n
En primer lugar, en el\u00a0componente debemos importar esta directiva de la siguiente forma:<\/p>\n
 <\/p>\n
\r\ndirectives: [formDirectives]\r\n<\/pre>\n
 <\/p>\n
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:<\/p>\n
 <\/p>\n
\r\n{{employe.name}}\r\n&amp;amp;lt;input [(ngModel)]="employe.name"&amp;amp;gt;\r\n<\/pre>\n
 <\/p>\n
Si ahora ejecutamos este c\u00f3digo, ver\u00e1s autom\u00e1ticamente que cada vez que se escribe cualquier valor en el formulario, se modifica el valor en todos los elementos donde se est\u00e1 mostrando este dato (facilitando mucho la vida del desarrollador).<\/p>\n
Con este cambio lo que\u00a0te he\u00a0querido mostrar<\/strong> es:<\/p>\n