Menu
I've downloaded Angular CLI 6.0.7 for Node and am playing around with it, following tutorials, etc. to learn as much as possible.
One thing I have a question about is data binding. It seems like if I wanted to bind the value of a component member variable, say title, to an input's value, I have two options: double curly braces or square brackets. These two forms:
<input [value]="title" type="text" />
<input value="{{title}}" type="text" />
Is there any difference between those two approaches, or is it all just stylistic preference? If there's a functional difference, which one is preferred in which situations?
Thanks in advance!
EDIT I understand that curly brackets denote string interpolation, resulting in a string, while square brackets denote property binding, which can use any data type. But what I don't understand is when are those two things functionally different? When would you ever have a DOM element's attribute contain a value that is not equivalent to its stringified version, and how would you even access such an attribute's value properly?
349
The curly brackets are used to denote a block of code in a function. So, say we need a function to calculate the standard error we might do this. The square brackets are used to subset vectors and data frames.
The square brackets [...] represent the one-way property binding from the component logic (data) to the view (target element). This represents event binding, which allows the target to listen for certain events such as clicks and keypresses. This represents two-way data binding, which combines the above two syntaxes.
Square brackets, often just called brackets in American English, are a set of punctuation marks that are most often used to alter or add information to quoted material.
To bind to an element's property, enclose it in square brackets, [] , which identifies the property as a target property. A target property is the DOM property to which you want to assign a value.
{{}} - Interpolation: It allows you to incorporate expressions. Angular evaluates all the expressions in double curly braces and converts the expression results to strings.
<p>{{ 1+1 }}</p>
The text between the braces can also be a component property
<p>{{ name }}</p>
[] - Property binding: It is a one-way binding, as values go from the component to the template. It lets you set the property of a view element. You can update the value of a property in the component and then bind it to an element in the view template. Property binding uses the [] syntax for data binding.
<button [disabled]="isDisabled"></button>
They're both effectively the same. You are binding one-way from component to view. However, there are some cases when you must use one over other.
For example, if you want to achieve string concatenation you must use interpolation (E.g., {{ }}).
<img src='baseUrl/{{path}}'/>
you can't achieve above using property binding.
On the other hand, when you want to bind non-string value to HTML element, you must use property binding (E.g., [])
<button [disabled]='isDisabled'> My Button </button>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
