What's the difference between `value="{{todo.title}}"` and `[value]="todo.title"`?

Question

I have been doing a todo app in Angular 2 to graps the concepts... What's the difference between value="{{todo.title}}" and [value]="todo.title"?

Answer 1

From Angular doc:

Property binding or interpolation?

We often have a choice between interpolation and property binding. The following binding pairs do the same thing:

<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>

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.

Link