Mouse events

To demonstrate the two popular mouse events, click and double-click, create a new Angular project and then add the following autogenerated app.component.html:

<div class="container">  <div class="row">    <h3 class="text-center">      {{counter}}    </h3>    <div class="buttons">      <div class="btn btn-primary">        Increment      </div>      <div class="btn btn-danger">        Decrement      </div>    </div>  </div></div>

A counter property is bound to the view using interpolation and Increment and Decrement buttons. The property is available on the app component and is initialized to zero:

import { Component } from '@angular/core';@Component({  selector: 'app-root',  templateUrl: './app.component.html',  styleUrls: ['./app.component.css']})export class AppComponent { counter ...

Get TypeScript 2.x for Angular Developers now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.