Difference between two types of data display in Angular 2

Question

I have Angular2 code:

<img [src]="value"> 

and

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

Note. Value is a component of a property

I tested myself and the result is the same, so what is the difference between the two?

Answer 1

1) NOTE : do not use "" and {{}} together else the value will be compressed.

 src="{{value}}" 

value will always be gated .

---

2)

Here value is the expression that will be evaluated for property binding .

[src] , this is the syntax of property binding angular2.

  <img [src]="value"> 

Thus, it will bind the value's to the src property .

Answer 2

They are both property bindings.

Interpolation

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

- it's just sugar for

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

Thus, the difference between these expressions is that the value in the interpolation src="{{value}}" always gated , while the binding value of the base property [src]="value" is passed as.

see also

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