DOM, DI and View: the trees of Angular

To be a productive Angular developer, you need to be fluent in various types of trees your app consists of. It is easy to mistake DI tree of injectors for DOM tree of actual HTML elements and Angular views. They seem to correspond to one another but that is not always the case. In this article we will explore the differences, learn how to spot them and work around potential difficulties.

Our test case

Let’s assume our-component with the following structure:

<parent>
  <child *ngFor=”let child of children”>
    <ng-container 
      *ngTemplateOutlet=”template; context: { $implicit: child }”
    ></ng-container>
  </child>
</parent>

And let’s say we use it as follows:

<our-component 
  [children]=”children” 
  [template]=”template”
></our-component>
<ng-template #template let-child>
  <some-component [item]=”child”></some-component>
</ng-template>

We will also list parent component template to be:

<parent-header></parent-header>
<ng-content></ng-content>

And child would be similar:

<child-header></child-header>
<ng-content></ng-content>

That is probably as simple as we can get to explore everything relevant. With a single child the rendered DOM…