The mechanics of DOM updates in Angular – Hacker Noon
- But for each component instance Angular creates a separate view.FactoryA component factory mostly consists of the view nodes generated by the compiler as a result of template parsing.
- The jit_viewDef1 is the reference to the viewDef function that creates a view definition.View definition receives view definition nodes as parameters which resemble the structure of the html but also contain many angular specific details.
- Angular compiler generates many different node definitions but for the purposes of this article we are only interested in the above two.
- Element nodes can contain other element nodes and text definition nodes as children which is reflected in the childCount property.All element definitions are generated by the elementDef function so jit_elementDef2 used in the factory references this function.
- The element definition takes some generic Name | Description childCount | specifies how many children || | the current element have || namespaceAndName | the name of the html element || fixedAttrs | attributes defined on the element others that are specific to the particular Angular Name | Description matchedQueriesDsl | used when querying child nodes || ngContentIndex | used for node projection || bindings | used for dom and bound properties update || outputs, handleEvent | used for event propagation the purposes of this article we’re only interested in the bindings parameters.Text definitionText definition is a node definition that Angular compiler generates for every text node.
DOM updates that are triggered by the model change is the key feature of all modern front-end frameworks and the Angular is no exception. We just specify the expression like this: and Angular…
or a binding like this:
Before we can begin exploring angular DOM updating functionality we need to first understand how Angular represents components under the hood. Let’s briefly review that.
As you may know from my other articles for each component that is used in the application Angular compiler generates a factory. When Angular creates a component from a factory, for example, like this:
Angular uses this factory to instantiate View Definition which in turn is used to create component View. Under the hood Angular represents an application as a tree of views. There is only one instance of a view definition per component type which acts as a template for all views. But for each component instance Angular creates a separate view.
A component factory mostly consists of the view nodes generated by the compiler as a result of template parsing. Suppose you define a component’s template like this:
Using this data the compiler generates the following component factory:
jit_textDef3(null,[‘I am ‘,…])
var _co = _v.component;
var currVal_0 = _co.name;
is the reference to the viewDef function that creates a view definition.
is a text definition. Angular compiler generates many different node definitions but for the purposes of this article we are only interested in the above two. Let’s review them briefly.
used in the factory references this function. The element definition takes some generic parameters:
And others that are specific to the particular Angular functionality:
| outputs, handleEvent | used for event propagation |
For the purposes of this article we’re only interested in the bindings parameters.
Text definition is a node definition that Angular compiler generates for every text node. Usually these are the child nodes of the element definition nodes as is the case in our example. This is a very simple node definition that is generated by the textDef function. It receives parsed expressions in the form of constants as a second parameter. For example, the following text:
will be parsed as an array:
[“Hello “, ” and another “, “”]
which is then used to generate correct bindings:
suffix: ‘ and another ‘
and evaluated like this during dirty checking:
Angular uses bindings to define dependencies of each node on the component class properties. During change detection each binding defines the type of operation used to reflect changes in a component in the DOM. This type of operation is determined by binding flags and constitute the following list:
Element and text definitions create these bindings internally based on the bindings flags identified by the compiler. Each node type has different logic specific to bindings generation.
Now let’s see what those functions do.