Angular 2. Formularios. Entrega 2: Templates (I). Interpolación, propiedades y atributos. Binding

Veamos que nos podemos encontrar en una plantilla

1. Sintaxix moustache {{}} o Interpolación

Se puede usar en

1 Texto fuera de las tags de HTML. Permitiendo evaluación de expresiones simples
<p>My current hero is {{currentHero.firstName}}</p>
<!-- "The sum of 1 + 1 is 2" -->
<p>The sum of 1 + 1 is {{1 + 1}}</p>

2. Para dar valores a atributos de ciertas tags de HTML
<img src="{{heroImageUrl}}" style="height:30px">

2. Expresiones y sentencias del Template

Hay que tener en cuenta que no nos podemos referir a ningún componente del global namespace. Por ejemplo, no se puede tener acceso a window ni document, ni a console.log ni Math.max. Solamente podemos acceder a métodos y atributos del componente asociado.

Dirección de los datos	Sintaxis	Tipo de Bind
Modelo -> Vista (único sentido)	{{expression}} [target] = "expression" bind-target = "expression"	Interpolation, Property, Attribute, Class, Style
Vista -> Modelo (único sentido)	(target) = "statement" on-target = "statement"	Event
Modelo <-> Vista  (doble sentido)	[(target)] = "expression" bindon-target = "expression"	Doble sentido

Donde se sustituye "target" por una propiedad o evento del DOM. Como se ve, hay una doble nomenclatura par decir lo mismo: 

• [propiedad] equivale bind-propiedad 
• (propiedad) equivale on-propiedad
• [(propiedad) equivale bindon-propiedad

Pero vamos a distinguir entre:

• Atributos (que se definen en el HTML). No varían nunca. En un control input tipo texto con un valor inicial (atributo value="A"). Si depués de cambiar el usario el valor a "B" y hacemos "input.getAttributte('value')", nos devuelve "B" y NO "A". En cambio el DOM si tiene el valor correcto de "B".
• Propiedades del DOM (Document Object Model). Pueden variar. No es lo mismo el atributo disabled de un boton (se incluye disabled o no se incluye en el HTML) y otra cosa es la propiedad disabled="true" del DOM

Como hemos dicho antes, solo podemos parametrizar PROPIEDADES y EVENTOS del DOM, y muy raramente atributos HTML.

Pero las propiedades y eventos se pueden especificar en elementos, componentes y directivas.

Veamos algunos ejemplos:

Elemento	Ejemplo
Propiedad de elemento	<img [src] = "heroImageUrl" >
Propiedad de componente	<hero-detail [hero]="currentHero" ></hero-detail >
Propiedad de directiva	<div [ngClass] = "{selected: isSelected}"></div>
Evento de elemento	<button (click) = "onSave()">Save</button>
Evento de componente	<hero-detail (deleteRequest)="deleteHero()"></hero-detail>
Evento de directiva	<div (myClick)="clicked=$event">click me</div>
Evento y propiedad two way binding	<input [(ngModel)]="heroName">
Atributo (EXCEPCION)	<button [attr.aria-label]="help">help</button>
Propiedad de clase	<div [class.special]="isSpecial">Special</div>
Propiedad de estilo	<button [style.color] = "isSpecial ? 'red' : 'green'">

Observaciones:

1. Si OMITIMOS los CORCHETES, no se evalua la parte derecha de la igualdad y se supone esta sefunda parte un string, con lo que si hacemos <hero-detail hero="currentHero"></hero-detail> sin cochetes en hero, se asignará al objeto hero el struing "currentHero" y NO el objeto llamado currentHero.
2. Podemos omitir los corchetes cuando se verifican todas estas premisas a la vez:
  2.1 El "target" acepta un valor string
  2.2 El string es un valor fijo.
  2.3 El valor inicial nunca cambia

3.  Se puede usar tanto interpolación {{}}, como property binding [], pero se está planteando priorizar a property binding, ya que parece mas claro.

<p><img src="{{heroImageUrl}}"> is the <i>interpolated</i> image.</p>
<p><img [src]="heroImageUrl"> is the <i>property bound</i> image.</p>

<p><span>"{{title}}" is the <i>interpolated</i> title.</span></p>
<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>

La interpolación (de atributos) es traducida a las correspondientes propiedades del DOM antes de renderizar la vista.

4. Seguridad: Tanto la interpolación como el property binding, rechazan ejecutar el código <script> escondido en strings. Así:

  evilTitle = 'Template <script>alert("evil never sleeps")</script>Syntax';
<p><span>"{{evilTitle}}" is the <i>interpolated</i> evil title.</span></p>

daría: 

"Template <script>alert("evil never sleeps")</script>Syntax" is the interpolated evil title

mientras:

<p>"<span [innerHTML]="evilTitle"></span>" is the <i>property bound</i> evil title.</p>

daría: 


"Template Syntax" is the property bound evil title