Registering handlers on native browser events

In Angular 2, the other hemisphere of binding that is needed for a fully functioning application is event binding. The Angular 2 event binding syntax is similar to that of data binding.

Note

The code, links, and a live example of this are available at http://ngcookbook.herokuapp.com/4437/.

Getting ready

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; 
} 

How to do it...

The Angular 2 event binding syntax is accomplished with a pair of parentheses surrounding...