Cuando creamos aplicaciones con Angular2  una de las tareas comunes es tomar los eventos del DOM, cuando el usuario realiza un click, pasa el mouse por un elemento etc, para lograr esto usamos Event Binds que nos permite responder a cualquier evento del DOM.

En este ejemplo muestro cómo vincular eventos del DOM con elementos, para seguir los pasos te puedes guiar del proyecto “Ejemplos con Angular2” .

Manos a la obra, al igual que el artículo de Class y Style Binding con Angular2 para realizar el Event Binding decoramos nuestro elementos de html con ()  y dentro especificamos el evento como  ‘mouseover’  , ‘click’ o cualquiera de los eventos disponibles  en este caso los el evento ‘mouseover’ y ‘click’ los suscribimos  a las funciones “CleanFriends” y “GetFriends”.

Primero modificamos el template del componente peppig.component.ts.

<a (mouseover) = "CleanFriends()"  class="waves-effect waves-light btn" [class.disabled] = "isdisabled" >
<a (click)="GetFriends()" class="waves-effect waves-light btn">Get Friends</a>

Hemos vinculado los eventos del DOM mouseover y click , utilizando el paréntesis ()  y para la suscripción a la función el  =”nombre de la función”  en este caso GetFriends()  que llamará el servicio PeppaPigService el cual se encargará de llenar nuestro array this.friends  y CleanFriends()  que vacia el array.

 CleanFriends() {
    this.friends = [];
    console.log(this.friends);
 }

 GetFriends() {
 this.friends = this._peppapigService.getPeppaFriends();
 console.log(this.friends);
 }

Para visualizar los elementos de array y ver cómo se eliminan vamos usar una ul y la directiva *ngFor.

<ul class="collection" >
 <li *ngFor="let f of friends">
 <a class="collection-item">{{f}}</a> 
 </li>
 </ul>>

Guardamos los cambios y escribiendo npm start en el directorio de la aplicación, iniciamos la transpilacion y el webserver.

Angular2 NPM Start

Angular2 NPM Start

Ahora accedemos a http://localhost:3000 y  hacemos click en “get friends”  el cual lanza el evento click y llama al servicio que a su vez llenará el array y mostrará el listado de amigos.

Al pasar el mouse por “clean friends” dispara el evento “mouseover”, vacia el array y el listado desaparece.

click

En muchos casos necesitamos saber el elemento que lanzó el evento, para realizar esto  le agregamos el parámetro $event en al función y en template, ahora al lanzar el evento “mouseover”, nos muestra toda la informacion con relacion al elemento que lanzo el evento.

Screen Shot 2016-06-06 at 10.35.12 PM

MouseOver , Event

Todos los eventos del DOM se lanzan en el orden de su árbol en el DOM, causando el “Event Bubble”, imaginemos que nuestro div está suscrito a un evento click y a una función específica.

 <div (click)="ClickContenedor()" ... 
//codigo resumido por omision.
ClickContenedor(){
 console.log("click contenedor");
 }

Ha hacer click en “GetFriends()” se dispara el DOM propaga el evento y también se lanza el evento Click de Div, como detenemos esto ?

Nos recordamos de event.stopPropagation() de jquery ?  pues solo tenemos que ir a nuestro evento y llamar el método $event.stopPropagation().

CleanFriends($event) {
 $event.stopPropagation()
 console.log(event);
 this.friends = [];
 }

Para mas informacion la documentacion oficial:

https://angular.io/docs/ts/latest/guide/template-syntax.html#!#event-binding

Descargar el código:

https://github.com/danywalls/components-con-angular2

Happy Angular!