Attribute value binding: square brackets vs curly brackets

Question

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

Answer 1

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>

Answer 2

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