sainture
3/9/2018 - 2:38 AM

Views

Host Views & Embedded Views

In short 
Embedded Views - are linked to a Template
Host Views - are linked to a Component (dynamically created)


Each component in Angular is represented as a view with nodes. Most nodes in the view resemble component 
template structure and represent DOM nodes. For example, you have a component A with the a-comp selector 
and the following template:

<h1>I am header</h1>
<span>I am {{name}}</span>

The compiler generates the following view nodes:

elementDataNode(h1)
textDataNode(I am header)
elementDataNode(span)
textDataNode(I am + bindings:[ {{name}} ])

There are many other types of nodes like directive data, query data etc.



Host view
The host view is a view that contains data for the a-comp component element and the data for the component 
class A. Angular compiler generates host views for each component defined in bootstrap or entryComponents
of a module. And each host view is responsible for creating a component view when you call 
factory.createComponent. The factories that are returned by the componentFactoryResolver are the host 
view factories.
Host views are created when a component is dynamically instantiated.

Embedded view
The embedded view is a view that is created for the the view nodes specified in the ng-template. 
It's like a component view but it doesn't have a wrapper component element and component data like 
injector etc. Basically it lacks the data that is contained in the host view. But it's still a valid 
view and is checked during detection as any other view.

A template simply holds a blueprint for a view. An embedded view can be instantiated from the template using
createEmbeddedView method.