What is an Angular View?

Photo by Drew Graham on Unsplash

Scenario

Reading through various tutorials we see the term View frequently and we would like to know what this refers to in general.

Concept

The View is something we route to. For example suppose our HomeComponent is routed to like this:

path:'home', component: HomeComponent

The template rendered by the HomeComponent is the View

Architectural Analysis

The View is the internal data structure that a component uses to represent itself and perform change detection.

For example for our AppComponent will have an AppComponentView that corresponds to the <app-component> dom element (declared component selector).

If that element is routed to then that’s a View.

When creating a components dynamically using a factory the View or Host View can be imperatively accessed like this:

helloComponentRef:ComponentRef = helloComponentFactory.create();
view: ViewRef = helloComponentRef.hostView;