What is the difference between a view, a host view and an embedded view

Question

In an effort to gain deeper knowledge into Angular 2 I wish someone would create an in-depth explanation/tutorial on the underlying structure of components, directives and their containers and views.

As per the docs:

The component’s container can contain two kinds of Views. Host Views, created by instantiating a Component via createComponent, and Embedded Views, created by instantiating an Embedded Template via createEmbeddedView. The location of the View Container within the containing View is specified by the Anchor element. Each View Container can have only one Anchor Element and each Anchor Element can only have a single View Container. Root elements of Views attached to this container become siblings of the Anchor Element in the Rendered View.

This leaves many open questions, such as:

A Host View is referring to the element that Component resides in, and an Embedded view is referring to the component’s template itself?

Is that true for both cases when created manually (via createComponent) as well as when created declaratively via in another hosting component (parent)?

Is that the case for Directives as well which don’t have a template (thus no view)? And how all this works in a Shadow dom environment (browser actually support a component host) vs an emulated environment?

Angular2 does do a lot of magic and in an effort to become an expert I wish to better understand, (maybe via a visual diagram) the entire relationship of: ViewContainerRef, Host views, Templates, Embedded Template, ViewChild, ViewContainer and their hierarchy of components and directives.

I consider myself extremely well versed in Angular2 (delivered 2 huge projects already) but still feel I have holes in my understanding of the underline internal workings.

Sure you don’t need to know how a car works to drive one, but you handle it much better if you do,

Thanks as always,

Sean

Answer 1

For in-depth information read this article Working with DOM in Angular: unexpected consequences and optimization techniques

This leaves many open questions, such as: a Host view is referring to the element that Component resides in, and an Embedded view is referring to the component’s template itself?

Component view

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.

Embedded view

The embedded view is a view that is created for 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.

Is that true for both cases when created manually (via createComponent) as well as when created declaratively via in another hosting component (parent)?

If a component is specified in the other component template, then the host view is not used. The parent component view contains the nodes that are usually defined in the host view and this parent view is responsible for creating a child component view.

Is that the case for Directives as well which don’t have a template (thus no view)?

Right, directives don't have a view so no views are created for directives.

And how all this works in a Shadow dom environment (browser actually support a component host) vs an emulated environment?

There's a renderer associated with each component and that renderer knows whether to use emulated or shadow DOM rendering. The renderer is defined by the compiler based on the viewEncapsulation parameter of the component decorator descriptor.

Here are some of the articles that I recommend reading:

• Exploring Angular DOM manipulation techniques using ViewContainerRef
• Here is why you will not find components inside Angular
• The mechanics of DOM updates in Angular
• The mechanics of property bindings update in Angular
• Everything you need to know about change detection in Angular