How does Angular use the template to display the data of the screen, what is going on under the hood?

Clearly Angular is not handling the template simply as a string.


It’s actually quite simple: Angular is taking the data and it’s applying it a function. The output of that function is the DOM data structure that corresponds to this HTML template.

Angular执行template function,该function的输出是DOM数据结构,同HTML template一致。

Angular is not generating HTML as a string, its generating DOM data structures directly.

For example, in our case Angular will generate the DOM data structure directly from the data via a component renderer.

If the application would be a native mobile application or a server-side application then the output of the renderer would be something else. But in this case, the output of the component renderer is the DOM tree that represents the component view.