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.