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// This component makes a request but it can't actually delete a hero.\n@<a href=\"api/core/Output\" class=\"code-anchor\">Output</a>() deleteRequest = new <a href=\"api/core/EventEmitter\" class=\"code-anchor\">EventEmitter</a><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</code-example>\n<p>The hosting parent component binds to the <code>deleteRequest</code> event of the <code>ItemDetailComponent</code> as follows.</p>\n<code-example path=\"event-binding/src/app/app.component.html\" header=\"src/app/app.component.html (event-binding-to-component)\" region=\"event-binding-to-component\">\n<app-item-detail (deleteRequest)=\"deleteItem($event)\" [item]=\"currentItem\"></app-item-detail>\n\n</code-example>\n<p>When the <code>deleteRequest</code> event fires, Angular calls the parent component's <code>deleteItem()</code> method with the item.</p>\n<h3 id=\"determining-an-event-target\">Determining an event target<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/event-binding#determining-an-event-target\"><i class=\"material-icons\">link</i></a></h3>\n<p>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 <code>myClick</code> is an event on the custom <code>ClickDirective</code>.</p>\n<code-example path=\"event-binding/src/app/app.component.html\" region=\"custom-directive\" header=\"src/app/app.component.html\">\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</code-example>\n<p>If the target event name, <code>myClick</code> fails to match an element event or an output property of <code>ClickDirective</code>, Angular reports an \"unknown directive\" error.</p>\n<h2 id=\"whats-next\">What's next<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/event-binding#whats-next\"><i class=\"material-icons\">link</i></a></h2>\n<p>For more information on how event binding works, see <a href=\"guide/event-binding-concepts\">How event binding works</a>.</p>\n\n \n</div>\n\n<!-- links to this doc:\n - guide/ajs-quick-reference\n - guide/built-in-directives\n - guide/example-apps-list\n - guide/glossary\n - guide/inputs-outputs\n - guide/observables-in-angular\n - guide/property-binding\n - guide/template-syntax\n - guide/two-way-binding\n - guide/user-input\n - tutorial/toh-pt2\n - tutorial/toh-pt4\n-->\n<!-- links from this doc:\n - api/core/EventEmitter\n - api/core/Output\n - guide/built-in-directives\n - guide/event-binding#binding-to-events\n - guide/event-binding#custom-events-with-eventemitter\n - guide/event-binding#determining-an-event-target\n - guide/event-binding#event-binding\n - guide/event-binding#whats-next\n - guide/event-binding-concepts\n - https://github.com/angular/angular/edit/master/aio/content/guide/event-binding.md?message=docs%3A%20describe%20your%20change...\n-->"
|
|
} |