{ "id": "guide/property-binding-best-practices", "title": "Property binding best practices", "contents": "\n\n\n
\n mode_edit\n
\n\n\n
\n

Property binding best practiceslink

\n

By following a few guidelines, you can use property binding in a way that helps you minimize bugs and keep your code readable.

\n
\n

See the for a working example containing the code snippets in this guide.

\n
\n

Avoid side effectslink

\n

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.

\n

An example of producing side effectslink

\n

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.

\n

As a best practice, use only properties and methods that return values.

\n

Return the proper typelink

\n

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.

\n

Passing in a stringlink

\n

In the following example, the childItem property of the ItemDetailComponent expects a string.

\n\n<app-item-detail [childItem]=\"parentItem\"></app-item-detail>\n\n\n

You can confirm this expectation by looking in the ItemDetailComponent where the @Input() type is string:

\n\n@Input() childItem: string;\n\n\n

The parentItem in AppComponent is a string, which means that the expression, parentItem within [childItem]=\"parentItem\", evaluates to a string.

\n\nparentItem = 'lamp';\n\n\n

If parentItem were some other type, you would need to specify childItem @Input() as that type as well.

\n

Passing in an objectlink

\n

In this example, ItemListComponent is a child component of AppComponent and the items property expects an array of objects.

\n\n<app-item-list [items]=\"currentItems\"></app-item-list>\n\n\n

In the ItemListComponent the @Input(), items, has a type of Item[].

\n\n@Input() items: Item[];\n\n\n

Notice that Item is an object that it has two properties; an id and a name.

\n\nexport interface Item {\n id: number;\n name: string;\n}\n\n\n

In app.component.ts, currentItems is an array of objects in the same shape as the Item object in items.ts, with an id and a name.

\n\ncurrentItems = [{\n id: 21,\n name: 'phone'\n}];\n\n\n

By supplying an object in the same shape, you satisfy the expectations of items when Angular evaluates the expression currentItems.

\n\n \n
\n\n\n" }