5 lines
14 KiB
JSON
5 lines
14 KiB
JSON
|
{
|
||
|
|
"id": "guide/binding-syntax",
|
||
|
|
"title": "Binding syntax",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/binding-syntax.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=\"binding-syntax\">Binding syntax<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/binding-syntax#binding-syntax\"><i class=\"material-icons\">link</i></a></h1>\n<p>Data binding automatically keeps your page up-to-date based on your application's state.\nYou use data binding to specify things such as the source of an image, the state of a button, or data for a particular user.</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=\"data-binding-and-html\">Data binding and HTML<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/binding-syntax#data-binding-and-html\"><i class=\"material-icons\">link</i></a></h2>\n<p>Developers can customize HTML by specifying attributes with string values.\nIn the following example, <code>class</code>, <code>src</code>, and <code>disabled</code> modify the <code><div></code>, <code><img></code>, and <code><button></code> elements respectively.</p>\n<code-example language=\"html\">\n<div class=\"special\">Plain old HTML</div>\n<img src=\"images/item.png\">\n<button disabled>Save</button>\n</code-example>\n<p>Use data binding to control things like the state of a button:</p>\n<code-example path=\"binding-syntax/src/app/app.component.html\" region=\"disabled-button\" header=\"src/app/app.component.html\">\n<!-- Bind button disabled <a href=\"api/animations/state\" class=\"code-anchor\">state</a> to `isUnchanged` property -->\n<button [disabled]=\"isUnchanged\">Save</button>\n\n</code-example>\n<p>Notice that the binding is to the <code>disabled</code> property of the button's DOM element, not the attribute.\nData binding works with properties of DOM elements, components, and directives, not HTML attributes.</p>\n<a id=\"html-attribute-vs-dom-property\"></a>\n<h3 id=\"html-attributes-and-dom-properties\">HTML attributes and DOM properties<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/binding-syntax#html-attributes-and-dom-properties\"><i class=\"material-icons\">link</i></a></h3>\n<p>Angular binding distinguishes between HTML attributes and DOM properties.</p>\n<p>Attributes initialize DOM properties and you can configure them to modify an element's behavior.\nProperties are features of DOM nodes.</p>\n<ul>\n<li>\n<p>A few HTML attributes have 1:1 mapping to properties; for example, <code>id</code>.</p>\n</li>\n<li>\n<p>Some HTML attributes don't have corresponding properties; for example, <code>aria-*</code>.</p>\n</li>\n<li>\n<p>Some DOM properties don't have corresponding attributes; for example, <code>textContent</code>.</p>\n</li>\n</ul>\n<div class=\"alert is-important\">\n<p>Remember that HTML attributes and DOM properties are different things, even when they have the same name.</p>\n</div>\n<p>In Angular, the only role of HTML attributes is to initialize element and directive state.</p>\n<p>When you write a data binding, you're dealing exclusively with the DOM properties and events of the target object.</p>\n<h4 id=\"example-1-an-input\">Example 1: an <code><input></code><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/binding-syntax#example-1-an-input\"><i class=\"material-icons\">link</i></a></h4>\n<p>When the browser renders <code><input type=\"text\" value=\"Sarah\"></code>, it creates a\ncorresponding DOM node with a <code>value</code> property and initializes that <code>value</code> to \"Sarah\".</p>\n<code-example language=\"html\">\n<input type=\"text\" value=\"Sarah\">\n<
|
||
|
|
}
|