Does Angular update only one DOM element or all DOM element when interpolation is used

Question

Consider that I have a child component with the following view template in Angular2 (or 4):

<div id="firstDiv">
<div id="secondDiv">
<span> {{someproperty}}</span>

<div>
</div>

And someproperty is a modified by the parent component using @input binding on the child. When the value of @input property changes, does the re-rendering of the child view happen at the div with the id of firstDiv or only at the <span> level? In other words, does the whole shown structure get refreshed or just the span or just the text in the span?

Answer 1

Only the text node inside the span element will be updated using the renderer. Here is the relevant code snippet from the sources:

if (checkAndUpdateBinding(view, nodeDef, bindingIndex, newValue)) {
    value = text + _addInterpolationPart(...);
    view.renderer.setValue(DOMNode, value);
}

DOMNode here is the reference to the textNode.

For more details read The mechanics of DOM updates in Angular