{ "id": "guide/event-binding", "title": "Event binding", "contents": "\n\n\n
\n mode_edit\n
\n\n\n
\n

Event bindinglink

\n

Event binding allows you to listen for and respond to user actions such as keystrokes, mouse movements, clicks, and touches.

\n
\n

See the for a working example containing the code snippets in this guide.

\n
\n

Binding to eventslink

\n

To bind to an event you use the Angular event binding syntax.\nThis syntax consists of a target event name within parentheses to the left of an equal sign, and a quoted template statement to the right.\nIn the following example, the target event name is click and the template statement is onSave().

\n\n<button (click)=\"onSave()\">Save</button>\n\n

The event binding listens for the button's click events and calls the component's onSave() method whenever a click occurs.

\n
\n \"Syntax\n
\n

Custom events with EventEmitterlink

\n

Directives typically raise custom events with an Angular EventEmitter as follows.

\n
    \n
  1. The directive creates an EventEmitter and exposes it as a property.
    2. \n
  2. The directive then calls EventEmitter.emit(data) to emit an event, passing in message data, which can be anything.
    3. \n
  3. Parent directives listen for the event by binding to this property and accessing the data through the $event object.
    4. \n
\n

Consider an ItemDetailComponent that presents item information and responds to user actions.\nAlthough the ItemDetailComponent has a delete button, it doesn't contain the functionality to delete the hero.\nIt can only raise an event reporting the user's delete request.

\n\n<img src=\"{{itemImageUrl}}\" [style.display]=\"displayNone\">\n<span [style.text-decoration]=\"lineThrough\">{{ item.name }}\n</span>\n<button (click)=\"delete()\">Delete</button>\n\n\n

The component defines a deleteRequest property that returns an EventEmitter.\nWhen the user clicks Delete, the component invokes the delete() method, telling the EventEmitter to emit an Item object.

\n\n// This component makes a request but it can't actually delete a hero.\n@Output() deleteRequest = new EventEmitter<Item>();\n\ndelete() {\n this.deleteRequest.emit(this.item);\n this.displayNone = this.displayNone ? '' : 'none';\n this.lineThrough = this.lineThrough ? '' : 'line-through';\n}\n\n\n

The hosting parent component binds to the deleteRequest event of the ItemDetailComponent as follows.

\n\n<app-item-detail (deleteRequest)=\"deleteItem($event)\" [item]=\"currentItem\"></app-item-detail>\n\n\n

When the deleteRequest event fires, Angular calls the parent component's deleteItem() method with the item.

\n

Determining an event targetlink

\n

To determine an event target, Angular checks if the name of the target event matches an event property of a known directive.\nIn the following example, Angular checks to see if myClick is an event on the custom ClickDirective.

\n\n<h4>myClick is an event on the custom ClickDirective:</h4>\n<button (myClick)=\"clickMessage=$event\" clickable>click with myClick</button>\n{{clickMessage}}\n\n\n

If the target event name, myClick fails to match an element event or an output property of ClickDirective, Angular reports an \"unknown directive\" error.

\n

What's nextlink

\n

For more information on how event binding works, see How event binding works.

\n\n \n
\n\n\n" }