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> value.</p>\n<code-example path=\"two-way-binding/src/app/sizer/sizer.component.ts\" region=\"sizer-component\" header=\"src/app/sizer.component.ts\">\nexport class SizerComponent {\n\n @<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>() size: number | string;\n @<a href=\"api/core/Output\" class=\"code-anchor\">Output</a>() sizeChange = new <a href=\"api/core/EventEmitter\" class=\"code-anchor\">EventEmitter</a><number>();\n\n dec() { this.resize(-1); }\n inc() { this.resize(+1); }\n\n resize(delta: number) {\n this.size = Math.min(40, Math.max(8, +this.size + delta));\n this.sizeChange.emit(this.size);\n }\n}\n\n</code-example>\n<p>The <code>sizerComponent</code> template has two buttons that each bind the click event to the <code>inc()</code> and <code>dec()</code> methods.\nWhen the user clicks one of the buttons, the <code>sizerComponent</code> calls the corresponding method.\nBoth methods, <code>inc()</code> and <code>dec()</code>, call the <code>resize()</code> method with a <code>+1</code> or <code>-1</code>, which in turn raises the <code>sizeChange</code> event with the new size value.</p>\n<code-example path=\"two-way-binding/src/app/sizer/sizer.component.html\" header=\"src/app/sizer.component.html\">\n<div>\n <button (click)=\"dec()\" title=\"smaller\">-</button>\n <button (click)=\"inc()\" title=\"bigger\">+</button>\n <label [style.font-size.px]=\"size\">FontSize: {{size}}px</label>\n</div>\n\n\n</code-example>\n<p>In the <code>AppComponent</code> template, <code>fontSizePx</code> is two-way bound to the <code>SizerComponent</code>.</p>\n<code-example path=\"two-way-binding/src/app/app.component.html\" header=\"src/app/app.component.html\" region=\"two-way-1\">\n<app-sizer [(size)]=\"fontSizePx\"></app-sizer>\n<div [style.font-size.px]=\"fontSizePx\">Resizable Text</div>\n\n</code-example>\n<p>In the <code>AppComponent</code>, <code>fontSizePx</code> establishes the initial <code>SizerComponent.size</code> value by setting the value to <code>16</code>.</p>\n<code-example path=\"two-way-binding/src/app/app.component.ts\" header=\"src/app/app.component.ts\" region=\"font-size\">\nfontSizePx = 16;\n\n</code-example>\n<p>Clicking the buttons updates the <code>AppComponent.fontSizePx</code>.\nThe revised <code>AppComponent.fontSizePx</code> value updates the style binding, which makes the displayed text bigger or smaller.</p>\n<p>The two-way binding syntax is shorthand for a combination of property binding and event binding.\nThe <code>SizerComponent</code> binding as separate property binding and event binding is as follows.</p>\n<code-example path=\"two-way-binding/src/app/app.component.html\" header=\"src/app/app.component.html (expanded)\" region=\"two-way-2\">\n<app-sizer [size]=\"fontSizePx\" (sizeChange)=\"fontSizePx=$event\"></app-sizer>\n\n</code-example>\n<p>The <code>$event</code> variable contains the data of the <code>SizerComponent.sizeChange</code> event.\nAngular assigns the <code>$event</code> value to the <code>AppComponent.fontSizePx</code> when the user clicks the buttons.</p>\n<div class=\"callout is-helpful\">\n <header>Two-way binding in forms</header>\n<p> Because no native HTML element follows the <code>x</code> value and <code>xChange</code> event pattern, two-way binding with form elements requires <code><a href=\"api/forms/NgModel\" class=\"code-anchor\">NgModel</a></code>.\nFor more information on how to use two-way binding in forms, see Angular <a href=\"guide/built-in-directives#ngModel\">NgModel</a>.</p>\n</div>\n\n \n</div>\n\n<!-- links to this doc:\n - guide/built-in-directives\n - guide/example-apps-list\n - guide/inputs-outputs\n - guide/template-syntax\n-->\n<!-- links from this doc:\n - api/core/EventEmitter\n - api/core/Input\n - api/core/Output\n - api/forms/NgModel\n - guide/built-in-directives#ngModel\n - guide/event-binding\n - guide/inputs-outputs\n - guide/property-binding\n - guide/two-way-binding#adding-two-way-data-binding\n - guide/two-way-binding#how-two-way-binding-works\n - guide/two-way-binding#prerequisites\n - guide/two-way-binding#two-way-binding\n - https://github.com/angular/angular/edit/master/aio/content/guide/two-way-binding.md?message=docs%3A%20describe%20your%20change...\n-->"
|
|
} |