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...
