Registering handlers on native browser events

Suppose you wanted to create an article application that counted shares, and you began with the following skeleton:

[app/article.component.ts]  import {Component} from '@angular/core';      @Component({     selector: 'article',     template: `       <h1>{{title}}</h1>       <p>Shares: {{shareCt}}</p>       <button>Share</button>     `   })   export class ArticleComponent {     title:string = 'Police Apprehend Tiramisu Thieves';     shareCt:number = 0;   }   

The Angular 2 event binding syntax is accomplished with a pair of parentheses surrounding the event type. In this case, events that you wish to listen for will have a type property of click, and this is what they will be bound against. The value of the bound event attribute is an expression, so you can invoke the method as a handler within it:

[app/article.component.ts]      import {Component} from '@angular/core';      @Component({     selector: 'article',     template: `       <h1>{{title}}</h1>       <p>Shares: {{shareCt}}</p>       <button (click)="share()">Share</button>     `   })   export class ArticleComponent {     title:string = 'Police Apprehend Tiramisu Thieves';     shareCt:number = 0;     share():void {       ++this.shareCt;     }   }   

Angular watches for the event binding syntax (click) and adds a click listener to ArticleComponent, bound to the share() handler. When this event is observed, it evaluates the expression attached to the event, which in this case will invoke a method defined on the component.

Since capturing the event must occur in an expression, you are provided with an $event parameter in the expression, which will usually be passed as an argument to the handler method. This is similar to the process in Angular 1. Inspecting this $event object reveals it as the vanilla click event generated by the browser:

[app/article.component.ts]      import {Component} from '@angular/core';      @Component({     selector: 'article',     template: `       <h1>{{title}}</h1>       <p>Shares: {{shareCt}}</p>       <button (click)="share($event)">Share</button>     `   })   export class ArticleComponent {     title:string = 'Police Apprehend Tiramisu Thieves';     shareCt:number = 0;     share(e:Event):void {       console.log(e);  // MouseEvent       ++this.shareCt;     }   }   

As with member binding, you are also able to use an alternate event binding syntax if you do not care to use a set of parentheses. Prefixing on- to the event attribute will provide you with identical behavior:

import {Component} from '@angular/core';      @Component({     selector: 'article',     template: `       <h1>{{title}}</h1>       <p>Shares: {{shareCt}}</p>       <button on-click="share($event)">Share</button>     `   })   export class Article {     title:string = 'Police Apprehend Tiramisu Thieves';     shareCt:number = 0;     share(e:Event):void {       ++this.shareCt;     }   }