Angular 2 Event Binding Tutorial - lishman.io
lishman.io Loading..
Style: Blog or IDE

Angular 2 Event Binding Tutorial

See how event bindings listen for DOM events such as click and keypress on standard HTML elements such as button and input.

Quick Tip

In the text below, when you see a word or phrase with this color, click on it to highlight the source code.

Also, take a look at the IDE style to see this tutorial in wide-screen mode. You can always switch back using the Style link at the top of the page.

Show me the IDE style

Event Binding with Parentheses

We handle DOM events using parentheses and template statements.

When an event in parentheses on the left of the equals is detected, the template statement in quotes on the right of the equals is executed. Alternatively, we can use the canonical form by prefixing the event name with on-. These three bindings are equivalent to (click), (dblclick) and (contextment).

The string in quotes is a template statement. Template statements respond to an event by executing some JavaScript-like code. Here we simply call methods on the component class and pass in the $event object.

The built-in $event object is automatically set to the target event, which in this case is of type MouseEvent. We can use this object to access X and Y coordinates, or any keys that were pressed at the time the mouse event was triggered.

mouse.component.ts x
Loading...

The Application

Here is the output from this component. Move the pointer around the inner box and click, double click and right click on the mouse whilst holding down the shift, ctrl or command key.

Loading...

Keyboard Events

Keyboard events follow the same pattern; template statements in quotes respond to DOM events which are surrounded by parentheses or prefixed with on-.

Template statements are expected to change the state of the application based on the user's input. Technically, they can contain statements that directly alter data such as "key = $event.key" but this is usually best handled by calling a method. This keeps the application logic contained within the component class.

keyboard.component.ts x
Loading...

The Application

Here is the output from this component.

Loading...

Drag and Drop Example

Let's look at event binding in action using a drag and drop example.

We bind to the mousedown and mouseup events and set the isMouseDown value accordingly.

The mousemove event on the container executes a template statement which calls the onMouseMove method. This method checks the isMouseDown value and, if it is true, adjusts the coordinates of the draggable block.

drag-drop.component.ts x
Loading...

The Application

Here is the output. Click on the green box to move it around within the gray container.

Loading...

Where Next?

More Tutorials

To find out more about Angular components, check out these tutorials.

  • Templates - introduction to inline and external templates.
  • Interpolation - use curly braces and template expressions to output data.
  • Property Binding - update standard properties on the DOM using template expressions.
  • Two-way Binding - combine property and event binding to create two-way binding with ngModel.
  • Input Binding - bind to <input> fields such as text, textarea, checkbox, radio and select.
  • Built-in Directives - use ngIf, ngSwitch, ngFor, ngClass and ngStyle to transform the DOM.
  • Component Input Output - use @Input and @Output to pass data in to and out of a component.

Reference

Source Code

The source code for this tutorial is available on plunker and in the angular-2-event-binding GitHub repo.