Event binding allows you to listen for and respond to user actions such as keystrokes, mouse movements, clicks, and touches.
See the live example for a working example containing the code snippets in this guide.
To bind to an event you use the Angular event binding syntax. This syntax consists of a target event name within parentheses to the left of an equal sign, and a quoted template statement to the right. In the following example, the target event name is click
and the template statement is onSave()
.
<button (click)="onSave()">Save</button>
The event binding listens for the button's click events and calls the component's onSave()
method whenever a click occurs.
EventEmitter
Directives typically raise custom events with an Angular EventEmitter as follows.
EventEmitter
and exposes it as a property.EventEmitter.emit(data)
to emit an event, passing in message data, which can be anything.$event
object.Consider an ItemDetailComponent
that presents item information and responds to user actions. Although the ItemDetailComponent
has a delete button, it doesn't contain the functionality to delete the hero. It can only raise an event reporting the user's delete request.
<img src="{{itemImageUrl}}" [style.display]="displayNone"> <span [style.text-decoration]="lineThrough">{{ item.name }} </span> <button (click)="delete()">Delete</button>
The component defines a deleteRequest
property that returns an EventEmitter
. When the user clicks Delete, the component invokes the delete()
method, telling the EventEmitter
to emit an Item
object.
// This component makes a request but it can't actually delete a hero. @Output() deleteRequest = new EventEmitter<Item>(); delete() { this.deleteRequest.emit(this.item); this.displayNone = this.displayNone ? '' : 'none'; this.lineThrough = this.lineThrough ? '' : 'line-through'; }
The hosting parent component binds to the deleteRequest
event of the ItemDetailComponent
as follows.
<app-item-detail (deleteRequest)="deleteItem($event)" [item]="currentItem"></app-item-detail>
When the deleteRequest
event fires, Angular calls the parent component's deleteItem()
method with the item.
To determine an event target, Angular checks if the name of the target event matches an event property of a known directive. In the following example, Angular checks to see if myClick
is an event on the custom ClickDirective
.
<h4>myClick is an event on the custom ClickDirective:</h4> <button (myClick)="clickMessage=$event" clickable>click with myClick</button> {{clickMessage}}
If the target event name, myClick
fails to match an element event or an output property of ClickDirective
, Angular reports an "unknown directive" error.
For more information on how event binding works, see How event binding works.
© 2010–2021 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v11.angular.io/guide/event-binding