Guía User Input

Manipulando directamente el evento DOM

No se recomienda
* < button (click)="onClickMe()">Click me!< /button > //click
* < input (keyup)="onKey($event)" > // Angular provides a corresponding DOM event object in the $event variable. All standard DOM event objects have a target property, a reference to the element that raised the event, event.target.value returns the current contents of that element.
* Without type info: onKey(event: any) { this.values += event.target.value + ‘ | ‘; }
* With type info: onKey(event: KeyboardEvent) { this.values += ( < HTMLInputElement >event.target).value + ‘ | ‘; }

Usando Template Reference Variables

* Para declarar una “template reference variable” utilizar # (The template is completely self contained. It doesn’t bind to the component, and the component does nothing.). This won’t work at all unless you bind to an event: es necesario (keyup)=”0″
< input #box (keyup)="0" >
< p>{{box.value}}< /p>

* get input box (clean data)
< input #box (keyup)="onKey(box.value)" >
onKey(value: string) { this.values += value + ‘ | ‘; }

* keyUp.enter: < input #box (keyup.enter)="onEnter(box.value)" >

* blur: < input #box (keyup.enter)="update(box.value)" (blur)="update(box.value)" >