5 lines
7.2 KiB
JSON
5 lines
7.2 KiB
JSON
|
{
|
||
|
|
"id": "guide/event-binding",
|
||
|
|
"title": "Event binding",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/event-binding.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <h1 id=\"event-binding\">Event binding<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/event-binding#event-binding\"><i class=\"material-icons\">link</i></a></h1>\n<p>Event binding allows you to listen for and respond to user actions such as keystrokes, mouse movements, clicks, and touches.</p>\n<div class=\"alert is-helpful\">\n<p>See the <live-example></live-example> for a working example containing the code snippets in this guide.</p>\n</div>\n<h2 id=\"binding-to-events\">Binding to events<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/event-binding#binding-to-events\"><i class=\"material-icons\">link</i></a></h2>\n<p>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 <code>click</code> and the template statement is <code>onSave()</code>.</p>\n<code-example language=\"html\" header=\"Event binding syntax\">\n<button (click)=\"onSave()\">Save</button>\n</code-example>\n<p>The event binding listens for the button's click events and calls the component's <code>onSave()</code> method whenever a click occurs.</p>\n<div class=\"lightbox\">\n <img src=\"generated/images/guide/template-syntax/syntax-diagram.svg\" alt=\"Syntax diagram\" width=\"600\" height=\"125\">\n</div>\n<h2 id=\"custom-events-with-eventemitter\">Custom events with <code><a href=\"api/core/EventEmitter\" class=\"code-anchor\">EventEmitter</a></code><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/event-binding#custom-events-with-eventemitter\"><i class=\"material-icons\">link</i></a></h2>\n<p><a href=\"guide/built-in-directives\">Directives</a> typically raise custom events with an Angular <a href=\"api/core/EventEmitter\">EventEmitter</a> as follows.</p>\n<ol>\n<li>The directive creates an <code><a href=\"api/core/EventEmitter\" class=\"code-anchor\">EventEmitter</a></code> and exposes it as a property.</li>\n<li>The directive then calls <code>EventEmitter.emit(data)</code> to emit an event, passing in message data, which can be anything.</li>\n<li>Parent directives listen for the event by binding to this property and accessing the data through the <code>$event</code> object.</li>\n</ol>\n<p>Consider an <code>ItemDetailComponent</code> that presents item information and responds to user actions.\nAlthough the <code>ItemDetailComponent</code> 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.</p>\n<code-example path=\"event-binding/src/app/item-detail/item-detail.component.html\" header=\"src/app/item-detail/item-detail.component.html (template)\" region=\"line-through\">\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</code-example>\n<p>The component defines a <code>deleteRequest</code> property that returns an <code><a href=\"api/core/EventEmitter\" class=\"code-anchor\">EventEmitter</a></code>.\nWhen the user clicks <strong>Delete</strong>, the component invokes the <code>delete()</code> method, telling the <code><a href=\"api/core/EventEmitter\" class=\"code-anchor\">EventEmitter</a></code> to emit an <code>Item</code> object.</p>\n<code-example path=\"event-binding/src/app/item-detail/item-detail.component.ts\" header=\"src/app/item-detail/item-detail.component.ts (deleteRequest)\" region=\"deleteRequest\">\n/
|
||
|
|
}
|