Understanding Angular Views

Deepak Pandey
Nov 6, 2019 · 4 min read

What is a View?

The smallest grouping of display elements that can be created and destroyed together.

Properties of elements in a view can change dynamically, in response to user actions; the structure (number and order) of elements in a view can’t. The structure of elements can be changed by inserting, moving, or removing nested views within their view containers. — as per Angular Docs.

Views are basically data structure which consists of view nodes that hold references to corresponding DOM elements. Every component has a component view associated with it.

The change detection cycle runs on the views and when angular finds a change in a component view state the corresponding node elements in DOM are rendered again.

Below is the structure of a view:

The elements in the template of the component are added as nodes array. The above view has 5 nodes in its template. The component property holds the state of the associated component.

The classes related to views:

ChangeDetectorRef — Base class for Angular Views, provides change detection functionality. This class provides various methods related to change detection.

ViewRef — Represents an Angular view specifically the host view defined by a component. This class extends the ChangeDetectorRef. Other than the methods inherited from the parent class it provides the method related to component/component view.

EmbeddedViewRef — Represents an Angular view in a view container. An embedded view can be referenced from a component other than the hosting component whose template defines it, or it can be defined independently by a TemplateRef.

ViewContainerRef — Represents a container where one or more views can be attached to a component. It can contain host views (created by instantiating a component with the createComponent() method), and embedded views (created by instantiating a TemplateRef with the createEmbeddedView() method).

A view container instance can contain other view containers, creating a view hierarchy.

View Classes Hierarchy

Types of Views

There are two types of views: Embedded and Host

Embedded views are linked to templates whereas Host views are linked to components.

Creating Embedded View

Here in the below example, we are creating an embedded view from the template inserted in the component template.

The <ng-container></ng-container> tags are used as the view container( by reading it as a ViewContainer using @ViewChild query) for the embedded view. It acts as an anchor element below which the view will be inserted in the component template.

The container’s createEmbeddedView() method is passed the template reference to create the view.

Creating Host View

Host views are related to the component. They are created when a component is dynamically created. Below the DynamicComponent is dynamically created using its factory.

The factory is resolved using the ComponentFactoryResolver instance injected to the component’s constructor.

Finally, the component view is added to the view container by using the container’s createComponent() method and passing the DynamicComponent factory.

One should make sure that the component that is to be created dynamically should be added to the entryComponents array so that the factory for the component is created during compile time.

Thank you for your time… :)

JavaScript in Plain English

Learn the web's most important programming language.

Deepak Pandey

Written by

Angular | Vue | Angular JS | JavaScript | Python | Java

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade