1. Definición
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.
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><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>();@Component({
inputs: ['hero'],
outputs: ['deleteRequest'],
})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>@Output('myClick') clicks = new EventEmitter<string>(); @Directive({
outputs: ['clicks:myClick'] // propertyName:alias
})