5 lines
8.3 KiB
JSON
5 lines
8.3 KiB
JSON
|
{
|
||
|
|
"id": "guide/two-way-binding",
|
||
|
|
"title": "Two-way binding",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/two-way-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=\"two-way-binding\">Two-way binding<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/two-way-binding#two-way-binding\"><i class=\"material-icons\">link</i></a></h1>\n<p>Two-way binding gives components in your application a way to share data.\nUse two-way binding to listen for events and update values simultaneously between parent and child 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/two-way-binding#prerequisites\"><i class=\"material-icons\">link</i></a></h2>\n<p>To get the most out of two-way binding, you should have a basic understanding of the following concepts:</p>\n<ul>\n<li><a href=\"guide/property-binding\">Property binding</a></li>\n<li><a href=\"guide/event-binding\">Event binding</a></li>\n<li><a href=\"guide/inputs-outputs\">Inputs and Outputs</a></li>\n</ul>\n<hr>\n<p>Two-way binding combines property binding with event binding:</p>\n<ul>\n<li><a href=\"guide/property-binding\">Property binding</a> sets a specific element property.</li>\n<li><a href=\"guide/event-binding\">Event binding</a> listens for an element change event.</li>\n</ul>\n<h2 id=\"adding-two-way-data-binding\">Adding two-way data binding<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/two-way-binding#adding-two-way-data-binding\"><i class=\"material-icons\">link</i></a></h2>\n<p>Angular's two-way binding syntax is a combination of square brackets and parentheses, <code>[()]</code>.\nThe <code>[()]</code> syntax combines the brackets of property binding, <code>[]</code>, with the parentheses of event binding, <code>()</code>, as follows.</p>\n<code-example path=\"two-way-binding/src/app/app.component.html\" header=\"src/app/app.component.html\" region=\"two-way-syntax\">\n<app-sizer [(size)]=\"fontSizePx\"></app-sizer>\n\n</code-example>\n<h2 id=\"how-two-way-binding-works\">How two-way binding works<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/two-way-binding#how-two-way-binding-works\"><i class=\"material-icons\">link</i></a></h2>\n<p>For two-way data binding to work, the <code>@<a href=\"api/core/Output\" class=\"code-anchor\">Output</a>()</code> property must use the pattern, <code>inputChange</code>, where <code>input</code> is the name of the <code>@<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>()</code> property.\nFor example, if the <code>@<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>()</code> property is <code>size</code>, the <code>@<a href=\"api/core/Output\" class=\"code-anchor\">Output</a>()</code> property must be <code>sizeChange</code>.</p>\n<p>The following <code>sizerComponent</code> has a <code>size</code> value property and a <code>sizeChange</code> event.\nThe <code>size</code> property is an <code>@<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>()</code>, so data can flow into the <code>sizerComponent</code>.\nThe <code>sizeChange</code> event is an <code>@<a href=\"api/core/Output\" class=\"code-anchor\">Output</a>()</code>, which allows data to flow out of the <code>sizerComponent</code> to the parent component.</p>\n<p>Next, there are two methods, <code>dec()</code> to decrease the font size and <code>inc()</code> to increase the font size.\nThese two methods use <code>resize()</code> to change the value of the <code>size</code> property within min/max value constraints, and to emit an event that conveys the new <code>size</code>
|
||
|
|
}
|