Suggest improvements

Angular 2 Events

Events in Angular 2 use the parentheses notation in templates, and trigger methods in a component’s class. For example, assume we have this component class:

@Component(...)
class MyComponent {
  clicked(event) {
  }
}

And this template:

<button (click)="clicked()">Click</button>

Our clicked() method will be called when the button is clicked.

Delegation

Events in Angular 2 behave like normal DOM events. They can bubble up and propagate down. Nothing special to do here!

Event object

To capture the event object, pass $event as a parameter in the event callback from the template:

<button (click)="clicked($event)"></button>

This is an easy way to modify the event, such as calling preventDefault:

@Component(...)
class MyComponent {
  clicked(event) {
    event.preventDefault();
  }
}