Additional information needed to avoid confusion about interpolation vs Property Binding #3041
Description
In the page at
https://angular.io/docs/ts/latest/guide/template-syntax.html#!#interpolation
when discussing
<p><img src="{{heroImageUrl}}"> is the <i>interpolated</i> image.</p>
<p><img [src]="heroImageUrl"> is the <i>property bound</i> image.</p>
<p><span>"{{title}}" is the <i>interpolated</i> title.</span></p>
<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
it states
Interpolation is a convenient alternative for property binding in many cases. In fact, Angular translates those interpolations into the corresponding property bindings before rendering the view.
There is no technical reason to prefer one form to the other. We lean toward readability, which tends to favor interpolation. We suggest establishing coding style rules and choosing the form that both conforms to the rules and feels most natural for the task at hand.
While this is so in the specific examples, if the binding source is not a string (e.g. I want to pass a Hero object to the component rather than the name of the hero) then I cannot use interpolation as this 'stringifies' the object.
I would suggest the wording be modified to
There is no technical reason to prefer one form to the other when binding strings, as in the examples above. We lean toward readability, which tends to favor interpolation. We suggest establishing coding style rules and choosing the form that both conforms to the rules and feels most natural for the task at hand.
It is also possible to pass an object to a child control using property binding - but not using interpolation. In the examples below, currentHero is a Hero object, heroImageUrl is a string.
<app-child currentHero={{currentHero}}></app-child> <!-- Cannot pass objects via interpolation-->
<br><img src='{{heroImageUrl}}'> <!-- This is fine - heroImageUrl is a string -->
<app-child [currentHero]='currentHero'></app-child> <!-- The object is available in the client -->
<br><img [src]='heroImageUrl'> <!-- This is fine - but may be less friendly than interpolation -->