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/a
|
||
|
|
}
|