5 lines
24 KiB
JSON
5 lines
24 KiB
JSON
|
{
|
||
|
|
"id": "guide/user-input",
|
||
|
|
"title": "User input",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/user-input.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=\"user-input\">User input<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/user-input#user-input\"><i class=\"material-icons\">link</i></a></h1>\n<div class=\"callout is-critical\">\n<header>Marked for archiving</header>\n<p>To ensure that you have the best experience possible, this topic is marked for archiving until we determine\nthat it clearly conveys the most accurate information possible.</p>\n<p>In the meantime, this topic might be helpful: <a href=\"guide/event-binding\">Event binding</a>.</p>\n<p>If you think this content should not be archived, please file a <a href=\"https://github.com/angular/angular/issues/new?template=3-docs-bug.md\">GitHub issue</a>.</p>\n</div>\n<p>User actions such as clicking a link, pushing a button, and entering\ntext raise DOM events.\nThis page explains how to bind those events to component event handlers using the Angular\nevent binding syntax.</p>\n<p>Run the <live-example></live-example>.</p>\n<h2 id=\"binding-to-user-input-events\">Binding to user input events<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/user-input#binding-to-user-input-events\"><i class=\"material-icons\">link</i></a></h2>\n<p>You can use <a href=\"guide/event-binding\">Angular event bindings</a>\nto respond to any <a href=\"https://developer.mozilla.org/en-US/docs/Web/Events\">DOM event</a>.\nMany DOM events are triggered by user input. Binding to these events provides a way to\nget input from the user.</p>\n<p>To bind to a DOM event, surround the DOM event name in parentheses and assign a quoted\n<a href=\"guide/template-statements\">template statement</a> to it.</p>\n<p>The following example shows an event binding that implements a click handler:</p>\n<code-example path=\"user-input/src/app/click-me.component.ts\" region=\"click-me-button\" header=\"src/app/click-me.component.ts\">\n<button (click)=\"onClickMe()\">Click me!</button>\n\n</code-example>\n<a id=\"click\"></a>\n<p>The <code>(click)</code> to the left of the equals sign identifies the button's click event as the <strong>target of the binding</strong>.\nThe text in quotes to the right of the equals sign\nis the <strong>template statement</strong>, which responds\nto the click event by calling the component's <code>onClickMe</code> method.</p>\n<p>When writing a binding, be aware of a template statement's <strong>execution context</strong>.\nThe identifiers in a template statement belong to a specific context object,\nusually the Angular component controlling the template.\nThe example above shows a single line of HTML, but that HTML belongs to a larger component:</p>\n<code-example path=\"user-input/src/app/click-me.component.ts\" region=\"click-me-component\" header=\"src/app/click-me.component.ts\">\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'app-click-me',\n template: `\n <button (click)=\"onClickMe()\">Click me!</button>\n {{clickMessage}}`\n})\nexport class ClickMeComponent {\n clickMessage = '';\n\n onClickMe() {\n this.clickMessage = 'You are my hero!';\n }\n}\n\n</code-example>\n<p>When the user clicks the button, Angular calls the <code>onClickMe</code> method from <code>ClickMeComponent</code>.</p>\n<h2 id=\"get-user-input-from-the-event-object\">Get user input from the $event object<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/user-input#get-user-input-from-the-event-object\"><i class=\"material-icons\">link</i></a></h2>\n<p>DOM events carry a payload of information that may be useful to the component.\nThis section shows how to bind to the <code>keyup</code> event of an inp
|
||
|
|
}
|