5 lines
6.9 KiB
JSON
5 lines
6.9 KiB
JSON
{
|
|
"id": "guide/property-binding-best-practices",
|
|
"title": "Property binding best practices",
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/property-binding-best-practices.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-best-practices\">Property binding best practices<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/property-binding-best-practices#property-binding-best-practices\"><i class=\"material-icons\">link</i></a></h1>\n<p>By following a few guidelines, you can use property binding in a way that helps you minimize bugs and keep your code readable.</p>\n<div class=\"alert is-helpful\">\n<p>See the <live-example name=\"property-binding\"></live-example> for a working example containing the code snippets in this guide.</p>\n</div>\n<h2 id=\"avoid-side-effects\">Avoid side effects<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/property-binding-best-practices#avoid-side-effects\"><i class=\"material-icons\">link</i></a></h2>\n<p>Evaluation of a template expression should have no visible side effects.\nUse the syntax for template expressions to help avoid side effects.\nIn general, the correct syntax prevents you from assigning a value to anything in a property binding expression.\nThe syntax also prevents you from using increment and decrement operators.</p>\n<h3 id=\"an-example-of-producing-side-effects\">An example of producing side effects<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/property-binding-best-practices#an-example-of-producing-side-effects\"><i class=\"material-icons\">link</i></a></h3>\n<p>If you had an expression that changed the value of something else that you were binding to, that change of value would be a side effect.\nAngular might or might not display the changed value.\nIf Angular does detect the change, it throws an error.</p>\n<p>As a best practice, use only properties and methods that return values.</p>\n<h2 id=\"return-the-proper-type\">Return the proper type<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/property-binding-best-practices#return-the-proper-type\"><i class=\"material-icons\">link</i></a></h2>\n<p>A template expression should evaluate to the type of value that the target property expects.\nFor example, return a string if the target property expects a string, a number if it expects a number, or an object if it expects an object.</p>\n<h3 id=\"passing-in-a-string\">Passing in a string<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/property-binding-best-practices#passing-in-a-string\"><i class=\"material-icons\">link</i></a></h3>\n<p>In the following example, the <code>childItem</code> property of the <code>ItemDetailComponent</code> expects a string.</p>\n<code-example path=\"property-binding/src/app/app.component.html\" region=\"model-property-binding\" header=\"src/app/app.component.html\">\n<app-item-detail [childItem]=\"parentItem\"></app-item-detail>\n\n</code-example>\n<p>You can confirm this expectation by looking in the <code>ItemDetailComponent</code> where the <code>@<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>()</code> type is <code>string</code>:</p>\n<code-example path=\"property-binding/src/app/item-detail/item-detail.component.ts\" region=\"input-type\" header=\"src/app/item-detail/item-detail.component.ts (setting the @Input() type)\">\n@<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>() childItem: string;\n\n</code-example>\n<p>The <code>parentItem</code> in <code>AppComponent</code> is a string, which means that the expression, <code>parentItem</code> within <code>[childItem]=\"parentItem\"</code>, evaluates to a string.</p>\n<code-example path=\"property-binding/src/app/app.component.ts\" region=\"parent-data-type\" header=\"src/app/app.component.ts\">\nparentItem = 'lamp';\n\n</code-example>\n<p>If <code>parentItem</code> were some other type, you would need to specify <code>childItem</code> <code>@<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>()</code> as that type as well.</p>\n<h3 id=\"passing-in-an-object\">Passing in an object<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/property-binding-best-practices#passing-in-an-object\"><i class=\"material-icons\">link</i></a></h3>\n<p>In this example, <code>ItemListComponent</code> is a child component of <code>AppComponent</code> and the <code>items</code> property expects an array of objects.</p>\n<code-example path=\"property-binding/src/app/app.component.html\" region=\"pass-object\" header=\"src/app/app.component.html\">\n<app-item-list [items]=\"currentItems\"></app-item-list>\n\n</code-example>\n<p>In the <code>ItemListComponent</code> the <code>@<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>()</code>, <code>items</code>, has a type of <code>Item[]</code>.</p>\n<code-example path=\"property-binding/src/app/item-list/item-list.component.ts\" region=\"item-input\" header=\"src/app/item-list.component.ts\">\n@<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>() items: Item[];\n\n</code-example>\n<p>Notice that <code>Item</code> is an object that it has two properties; an <code>id</code> and a <code>name</code>.</p>\n<code-example path=\"property-binding/src/app/item.ts\" region=\"item-class\" header=\"src/app/item.ts\">\nexport interface Item {\n id: number;\n name: string;\n}\n\n</code-example>\n<p>In <code>app.component.ts</code>, <code>currentItems</code> is an array of objects in the same shape as the <code>Item</code> object in <code>items.ts</code>, with an <code>id</code> and a <code>name</code>.</p>\n<code-example path=\"property-binding/src/app/app.component.ts\" region=\"pass-object\" header=\"src/app.component.ts\">\ncurrentItems = [{\n id: 21,\n name: 'phone'\n}];\n\n</code-example>\n<p>By supplying an object in the same shape, you satisfy the expectations of <code>items</code> when Angular evaluates the expression <code>currentItems</code>.</p>\n\n \n</div>\n\n<!-- links to this doc:\n - guide/property-binding\n-->\n<!-- links from this doc:\n - api/core/Input\n - guide/property-binding-best-practices#an-example-of-producing-side-effects\n - guide/property-binding-best-practices#avoid-side-effects\n - guide/property-binding-best-practices#passing-in-a-string\n - guide/property-binding-best-practices#passing-in-an-object\n - guide/property-binding-best-practices#property-binding-best-practices\n - guide/property-binding-best-practices#return-the-proper-type\n - https://github.com/angular/angular/edit/master/aio/content/guide/property-binding-best-practices.md?message=docs%3A%20describe%20your%20change...\n-->"
|
|
} |