title: How exactly works the Angular *ngFor in this example?
body: <p>I am pretty new in Angular 2 and I am not so into JavaScript\TypeScript (I came from Java) and I have some doubt about an example that I am studying related how to a component can use a property defined in another component (property\event binding). The example show how an array of element declared in a child component can be used and shown in the parent component.</p>
  
  <p>So I have the <strong>app-component</strong> that is the <strong>parent component</strong>.</p>
  
  <p>This is the <strong>app-component</strong> "view" named <strong>app-component.html</strong>:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;app-cockpit&gt;&lt;/app-cockpit&gt;
    &lt;hr&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-xs-12"&gt;
        &lt;app-server-element
          *ngFor="let serverElement of serverElements"
          [element]="serverElement"&gt;&lt;/app-server-element&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>From what I can undestand this code generate <strong>app-server-element</strong> (another component of my application with its layout) starting from the <strong>serverElements</strong> array that is defined into the <strong>app.component.ts</strong> class, this one:</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    serverElements = [{type: 'server', name: 'TestServer', content: 'Just a Test'}];
  }
  </code></pre>
  
  <p>So here I have a this first doubt: doing:</p>
  
  <pre><code>&lt;app-server-element
      *ngFor="let serverElement of serverElements"
      [element]="serverElement"&gt;
  &lt;/app-server-element&gt;
  </code></pre>
  
  <p>The <strong>*ngFor</strong> directive is iterating on the <strong>serverElements</strong> array that is defined into the <strong>app.component.ts</strong> class (related to the main <strong>app-component</strong> component) and not on the <strong>server-element.component.ts</strong>  class (related to the <strong></strong> component). </p>
  
  <p>It works fine but it seems to me a little strange. Why? My idea is that this <strong>*ngFor</strong> directive is declared into the HTML code of the <strong>app-component.html</strong> related to the <strong></strong>, so the iteration is on an array that is defined in the related class.</p>
  
  <p>Is it or am I missing something?</p>