Event Binding - Binding de eventos (One-Way Binding)

El siguiente post es continuación del resumen de Angular 2

En el post anterior se explicaba el (Binding de propiedades) el cual consistía en la comunicación de las propiedades de las clases de los componentes (TypeScript o JavaScript) al DOM, es decir:

JavaScript to HMTL

En el caso de Event Binding, es lo contrario:

HTML to JavaScript

Por ejemplo añadimos una función en nuestro componente:

1
2
3
4
5
6
export class CarPartsComponent {
...
upQuantity() {
alert("You Called upQuantity");
}
...

Y este es llamado desde HTML, por ejemplo al hacer click:

1
<button (click)="upQuantity( carPart )" >Click to alert</button>

Además del click tenemos los siguientes eventos:

1
2
3
4
5
6
7
8
9
<div (mouseover)="call()">
<input (blur)="call()">
<input (focus)="call()">
<input type="text" (keydown)="call()">
<form (submit)="call()">

Como es de esperar es posible coger información desde el elemento HTML para luego utilizarla en nuestra clase JS, por ejemplo vamos a mostrar un alert de cada letra que el usuario introduce en un input:

  • Código HTML:
1
<input type="text" (keydown)="showKey($event)">
  • TypeScript o JavaScript
export class CarPartsComponent {
  ...
  showKey(event) {
    alert(event.keyCode);
  }

  ...

En el siguiente post tratara de Two-way Binging, es decir comuncación bidireccional entre el DOM y Js.