Difference between interpolation and property binding

Question

I have a component which defines an imageUrl property and in my template I use this property to set the url of an image. I tried this using interpolation and using property binding, both work, but I cannot find any differences between the two, or when to use the one over the other. Does anyone know the difference?

<img [src]='imageUrl' >

<img src= {{ imageUrl }} >

Answer 1

Angular evaluates all expressions in double curly braces, converts the expression results to strings, and concatenates them with neighboring literal strings. Finally, it assigns this composite interpolated result to an element or directive/component property. -- from https://angular.io/docs/ts/latest/guide/template-syntax.html#!#interpolation

Property binding does not convert the expression result to a string.

So if you need to bind something other than a string to your directive/component property, you must use property binding.