5 lines
17 KiB
JSON
5 lines
17 KiB
JSON
|
{
|
||
|
|
"id": "guide/property-binding",
|
||
|
|
"title": "Property binding",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/property-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=\"property-binding\">Property binding<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/property-binding#property-binding\"><i class=\"material-icons\">link</i></a></h1>\n<p>Property binding in Angular helps you set values for properties of HTML elements or directives.\nWith property binding, you can do things such as toggle button functionality, set paths programmatically, and share values between components.</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=\"prerequisites\">Prerequisites<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/property-binding#prerequisites\"><i class=\"material-icons\">link</i></a></h2>\n<p>To get the most out of property binding, you should be familiar with the following:</p>\n<ul>\n<li><a href=\"guide/architecture-components\">Basics of components</a></li>\n<li><a href=\"guide/glossary#template\">Basics of templates</a></li>\n<li><a href=\"guide/binding-syntax\">Binding syntax</a></li>\n</ul>\n<h2 id=\"understanding-the-flow-of-data\">Understanding the flow of data<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/property-binding#understanding-the-flow-of-data\"><i class=\"material-icons\">link</i></a></h2>\n<p>Property binding moves a value in one direction, from a component's property into a target element property.</p>\n<div class=\"alert is-helpful\">\n<p>For more information on listening for events, see <a href=\"guide/event-binding\">Event binding</a>.</p>\n</div>\n<p>To read a target element property or call one of its methods, see the API reference for <a href=\"api/core/ViewChild\">ViewChild</a> and <a href=\"api/core/ContentChild\">ContentChild</a>.</p>\n<h2 id=\"binding-to-a-property\">Binding to a property<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/property-binding#binding-to-a-property\"><i class=\"material-icons\">link</i></a></h2>\n<p>To bind to an element's property, enclose it in square brackets, <code>[]</code>, which identifies the property as a target property.\nA target property is the DOM property to which you want to assign a value.\nFor example, the target property in the following code is the image element's <code>src</code> property.</p>\n<code-example path=\"property-binding/src/app/app.component.html\" region=\"property-binding\" header=\"src/app/app.component.html\">\n<img [src]=\"itemImageUrl\">\n\n</code-example>\n<p>In most cases, the target name is the name of a property, even when it appears to be the name of an attribute.\nIn this example, <code>src</code> is the name of the <code><img></code> element property.</p>\n<p>The brackets, <code>[]</code>, cause Angular to evaluate the right-hand side of the assignment as a dynamic expression.\nWithout the brackets, Angular treats the right-hand side as a string literal and sets the property to that static value.</p>\n<code-example path=\"property-binding/src/app/app.component.html\" region=\"no-evaluation\" header=\"src/app.component.html\">\n<app-item-detail childItem=\"parentItem\"></app-item-detail>\n\n</code-example>\n<p>Omitting the brackets renders the string <code>parentItem</code>, not the value of <code>parentItem</code>.</p>\n<h2 id=\"setting-an-element-property-to-a-component-property-value\">Setting an element property to a component property value<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/property-binding#setting-an-element-property-to-a-component-property-value\"><i class=\"material-ico
|
||
|
|
}
|