16

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?

IceMetalPunk
  • 5,476
  • 3
  • 19
  • 26
  • Possible duplicate of [Property binding vs attribute interpolation](https://stackoverflow.com/questions/39112904/property-binding-vs-attribute-interpolation) –  Jun 07 '18 at 07:12
  • 1
    I think that this is an important question. I am surprised that Angular documentation is not that clear about the topic. – Ahmad Shahwan Nov 26 '20 at 09:48

3 Answers3

15

They may seem to be the same but, {{ }} will convert the input to a string. However if you want to input a number or an object, you must use [ ].

I included a stackblitz representation for the same here

Divneet
  • 648
  • 4
  • 18
  • Okay, I see how it could be important when using attributes of custom components. But does the difference ever matter when binding to attributes of standard HTML DOM elements? I was under the impression that HTML uses loose equality checks for its attributes? – IceMetalPunk Jun 07 '18 at 07:29
  • you are right there. It uses loose equality checks. You should be fine until you do not use those properties to modify your business logic in ts which uses strict equality checks! Hope that helps!! – Divneet Jun 07 '18 at 08:38
3

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>
AD8
  • 2,168
  • 2
  • 16
  • 31
  • It's the second part I'm not understanding. If I were to use `disabled='{{isDisabled}}'`, why would that not work just as well? Don't the strings "true" and "1" both equate to the Boolean true anyway? – IceMetalPunk Jun 07 '18 at 07:21
  • 1
    check the answer @IceMetalPunk. They dont work because they are of the type STRING and not number or boolean. – Divneet Jun 07 '18 at 07:25
  • 1
    @IceMetalPunk The way I look at this is - HTML element’s property and DOM property are two separate concepts, when you go disabled = ‘{{isDisabled}}’, you’re trying to bind to HTML element’s property, in this case, disabled property of button element. In fact, the HTML element properties are effectively one-off thing and disappear as soon as the DOM is ready. They are useful for initialisation of the DOM property. Per my understanding, button element’s disabled property’s value set to something other than browser standards probably won’t be understood by browsers. – AD8 Jun 07 '18 at 07:40
  • 4
    You can easily do string concatenation using property binding: ``... – mmey Jan 08 '20 at 09:06
  • @mmey Agreed, so technically this answer is INCORRECT. – Bohao LI Oct 29 '20 at 15:28
1

{{}} - 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>
Sapana M
  • 21
  • 2