Difference between 2 type of displaying data in Angular 2

Question

I have some Angular2 code:

and

Note:

Answer 1

1) NOTE : don't use "" & {{}} together else value will be stringified.

src="{{value}}" 

value will always be stringified.

---

2)

Here, value is an expression which will be evaluated for the property binding.

[src] to be precise, this is an angular2 way property binding syntax.

 <img [src]="value">

So, it will bind value's evaluated value to src property.

Answer 2

They are both properties bindings

Interpolation

<img src="{{value}}">

is just sugar for

<img [src]="interpolate(value)">

So the difference between those expressions is that the value in the interpolation src="{{value}}" is always stringified while the value of basic property binding [src]="value" is passed as is.

See also

• What's the difference between `value="{{todo.title}}"` and `[value]="todo.title"`?
• Angular 2 Template Syntax