Interpolation es la forma más conocida para binding de datos en angular, este ha cambiado pero el proceso internamente continúa igual. Angular2 compila nuestro template, crea un elemento en el DOM, haciendo referencia a la propiedad de nuestro componente.

Para este ejemplo modificaremos el componente peppapig.component.ts y creamos una propiedad welcome, la incluiremos en el template y utilizo {{}}, [] y bind- para mostrar la propiedad de diferentes formas pero con el mismo resultado:

@Component({
 selector:'peppapig-component',
 template:`
 <div>
 <h2>{{welcome}}</h2>
 <h2 [textContent]="welcome"></h2>
 <h2 bind-textContent="welcome"></h2>
 </div>`,
 providers: [PeppaPigService]
})
export class PeppaPigComponent{
 
 friends: string[];
 welcome: string = "Peppa Pig Friends"
 
 constructor(private _peppapigService: PeppaPigService){
 
 this.friends = this._peppapigService.getPeppaFriends();
 console.log(this.friends);
 }
}

Que ha pasado ?

Si abrimos el browser y vemos que se ha mostrado la propiedad 3 veces, aunque hemos accedido a ella de diferentes formas:

<h2>{{welcome}}</h2>
 <h2 [textContent]="welcome"></h2>
 <h2 bind-textContent="welcome"></h2>

{{}}

En la primera línea utilizamos {{}}  en la se especifica dentro {{}} la propiedad y lo utilizamos dentro de un tag del DOM, a nivel de lectura del código es más agradable.

[]  bind-

Al igual que punto anterior en este especifico con bind- la propiedad que quiero acceder de este elemento del DOM, para realizar el binding.

En el caso 2 y 3 no se usa  el elemento del DOM directamente, sino se accede a la propiedad que expone.

Tanto 1,2,3  son válidas porque todas angular2 realiza el binding.

Entonces cual usar y cuando ?

Es una cuestión de lectura y gusto, ambas opciones son válidas pero en mi caso prefiero usar {{}}  cuando solo necesito representar un texto aprovechando directamente el elemento del DOM  Ejemplo:

<h1>{{title}}<h1>

[] o bind-element cuando necesito interactuar con una propiedad del elemento, ejemplo:

<img bind-src="mipropiedaddelcomponent">

Hay que recordar que esta forma de acceder a propiedades del componente es 1 way binding, esto quiere decir que si la propiedad cambia en el componente, esta la refleja en el DOM pero no de viceversa.

Si deseas bajar el ejemplo:

https://github.com/danywalls/components-con-angular2

Saber mas sobre Interpolation:

https://angular.io/docs/ts/latest/guide/template-syntax.html#!#interpolation

Gracias a @oriolpuigbuil por el feedback.

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *