How does Angular evaluate expressions in interpolation?

Question

Reading the interpolation theory in the Angular docs gave me a question related to how Angular evaluates interpolation expressions and what it does to strings.

From the docs

Angular evaluates all expressions in double curly braces, converts the expression results to strings, and links them with neighboring literal strings. Finally, it assigns this composite interpolated result to an element or directive property .

Does it link to a kind of duplicate string that Angular does to keep the original value untouched? Is it something like decorators when they leave the original function without touch? This is more of a theoretical question.

<!-- "The sum of 1 + 1 is not 4" -->
<p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}.</p>

What does Angular do with this string?

Answer 1

Interpolation binds the data one-way. This means that when value of the field bound using interpolation changes, it is updated in the page as well. It cannot change the value of the field. An object of the component class is used as data context for the template of the component. So the value to be bound on the view has to be assigned to a field in the component class.

The syntax of binding a field using double curly braces is called Binding Expression .