Angular 2 Cookbook

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