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

Question

I am making a todo application in Angular 2 to capture concepts ... What is the difference between value="{{todo.title}}" and [value]="todo.title" ?

Answer 1

From Angular doc:

Linking or interpolating properties?

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 linking properties in many cases. In fact, Angular translates these interpolations into the corresponding property bindings before rendering the view.

There is no technical reason to prefer one form to another. We tend to readability, which tends to facilitate interpolation. We propose to establish the rules of the coding style and choose a form that meets the rules and is most natural for this task.

Link

Answer 2

Say we have this data

 todo = { title: 5 }; 

1) value="todo.title" - an attribute with the name value and the value "todo.title" (string)

2) value="{{todo.title}}" - property with the name value and value "5" ( always a string )

template_parser.ts method _parseAttr

Therefore, it will not be included as an attribute.

3) [value]="todo.title" - a property with the name value and value 5 (number)

Thus, the difference between these expressions is that the value in the interpolation ( value="{{todo.title}}" ) is always gated , while the binding value of the main property ( [value]="todo.title" ) transmitted as is.