title: Angular 2 and component tree
body: <p>I'm studying Angular 2 internal components and behaviors and I'm having some questions concerning the component tree management.</p>
  
  <p>In a web app based on components, it's clear that we have a component tree. One component is composed of another one, from top to bottom, and it's really powerful.</p>
  
  <p><a href="https://i.stack.imgur.com/WDUG1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WDUG1.png" alt="enter image description here"></a></p>
  
  <p>But now, I m wondering how does angular 2 manages the representation of this component tree internally ?</p>
  
  <hr>
  
  <p><strong>What I mean there is that we never say in an angular component, what <em>components will be inside of it</em>, <em>except</em> in the template.</strong></p>
  
  <hr>
  
  <p>For example, I never say in my <em>HomeComponent definition</em> that it owns a <em>PrestaCardComponent</em> :</p>
  
  <pre><code>import { Component, OnInit, Inject } from '@angular/core';
  
  @Component({
      selector: 'app-home',
      templateUrl: './home.component.html',
      styleUrls: ['./home.component.css']
  })
  export class HomeComponent implements OnInit {
  
      prestations: Array&lt;any&gt;;
      featurettes: Array&lt;any&gt;;
      constructor( @Inject('AppStore') private appStore: any) {
          this.prestations = [];
          this.featurettes = [];
      }
  
      ngOnInit() {
  
      }
  
  }
  </code></pre>
  
  <p>Except in my template :</p>
  
  <pre><code>&lt;div *ngFor="let prestation of prestations" class="col-md-4 m-b"&gt;
                  &lt;app-presta-card [title]="prestation.title" [content]="prestation.content" [image]="prestation.image"&gt;&lt;/app-presta-card&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p><strong>What I understand it means</strong></p>
  
  <p>It means that Angular 2 is able to create the <em>virtual component tree</em>, by reading the different templates.</p>
  
  <p>How can it be possible ? How does it work ?</p>