Angular 2. Formularios. Entrega 7: Templates (6). Template reference variables.

1. Definición

La referencia a una variable de la plantilla es una referencia a un elemento del DOM o una directiva en un template. O sea se puede utilizar con elementos nativos del DOM y también con componentes de Angular.

Se pueden referenciar en cualquier lugar de la template actual. No se deben repetir los nombres de las variables en la misma template.

2. Creación

Veamos 2 ejemplos de creación de variables, una con el prefijo "#" y el otro con el prefijo canónico equivalente ref-. Veamos un ejemplo de ambos, el primero, la variable phone y la segunda con la variable fax. Hay que observar que estas variables se han creado en elementos tipo <input>

<!-- phone refers to the input element; pass its `value` to an event handler -->
<input #phone placeholder="phone number">
<button (click)="callPhone(phone.value)">Call</button>

<!-- fax refers to the input element; pass its `value` to an event handler -->
<input ref-fax placeholder="fax number">
<button (click)="callFax(fax.value)">Fax</button>

3. Caso especial de NgForm

Podemos asignar una variable a un formulario, pero con la salvedad que no es del tipo HTMLFormElement sino a una referencia a la directiva de Angular NgForm que le otorga de "superpoderes" como rastrear la validez de la entrada de datos del usuario. 

En este ejemplo podemos ver como asignar una variable al NgForm y no dejamos hacer un "submit" si el formulario no contiene datos correctos.

<form (ngSubmit)="onSubmit(theForm)" #theForm="ngForm">
  <button type="submit" [disabled]="!theForm.form.valid">Submit</button>
</form>

4. Targets y sources

Hasta ahora vinculábamos expresiones con componentes que la parte derecha del binding (por tanto son origenes o sources)

Ahora nos centraremos en los destinos o targets que son propiedades de directivas en la parte izquierda del binding. En este último caso las propiedades de la directiva se deben declarar como inputs o outputs.

ACLARACIONES:

1. El target de un binding es la parte izquierda de un =
2. El target de un binding es la propiedad o evento dentro de la notación de binding: [], () o [()]
3. El source de un binding está entre comillas (" ") o dentro de una interpolación ( {{}} ).

4. Tenemos acceso limitado a miembros de una directiva target. Solamente podemos hacer bindings a propiedades que seon explicitamente identificadas como inputs y outputs

Veamos ejemplos de sources (que van a la derecha del = y van entre colmillas, por tantyo no se declaran con input o output.:

<img [src]="iconUrl"/>
<button (click)="onSave()">Save</button>

Ahora veamos 2 targets (el primer hero se decara entre corchetes y es una property binding y el segundo entre paréntesis es un event binding:

<hero-detail [hero]="currentHero" (deleteRequest)="deleteHero($event)">
</hero-detail>

5. Targets: propiedades de entrada y salida (input/output)

En el componente, estas variables target serán declaradas de 2 formas:
1. O con las anotaciones (decaradores) @input o @output,

@Input()  hero: Hero;
@Output() deleteRequest = new EventEmitter<Hero>();

2. o como miembros de los arrays inputs y inputs

@Component({
  inputs: ['hero'],
  outputs: ['deleteRequest'],
})

INPUT: Cuando la propiedad recoge los datos desde una expresion del template binding
OUTPUT: Cuando muestran los productores de eventos, tales como objetos EventEmitter

6. Alias de inputs y outputs

Se pueden utilizar alias de los targets (input y/o outputs), ya que los nombres puede no ser muy esclarecedores.

Sea el siguiene código del template

<div (myClick)="clickMessage=$event">click with myClick</div>

que en el componente se puede indicar dicho alias entre paréntesis y comilla simple

@Output('myClick') clicks = new EventEmitter<string>(); 

que también se podría expresar en la forma del array

@Directive({
  outputs: ['clicks:myClick']  // propertyName:alias
})