Mouse Events and Manipulating State

users.component.html

<button (click)="fireEvent($event)">Add new user</button>

users.component.ts

fireEvent(e){
    console.log('Button Clicked');
  }

Other events

<button (mouseover)="fireEvent($event)">Add new user</button>

<button (mouseout)="fireEvent($event)">Add new user</button>

<button (mousedown)="fireEvent($event)">Add new user</button>

<button (mouseup)="fireEvent($event)">Add new user</button>

<button (dbclick)="fireEvent($event)">Add new user</button>

<button (drag)="fireEvent($event)">Add new user</button>

<button (dragover)="fireEvent($event)">Add new user</button>

fireEvent(e){
    console.log(e.type);
  }