title: Passing a value to a child component Angular2
body: <p>I'm trying to pass a value from a parent component to a child component I tried this:</p>
  
  <p>This is my parent component:</p>
  
  <pre><code>import {Component, View, NgFor} from 'angular2/angular2';
  
  import {DisplayCard} from '../display-card/display-card';
  
  @Component({
    selector: 'display'
  })
  @View({
    templateUrl: './components/display/display.html',
    directives: [DisplayCard, NgFor]
  })
  export class Display {
    displays: Array&lt;any&gt;;
  
    constructor(){
      this.displays = [
        {name: "Lobby", appName: "Animal App", Source: 3},
        {name: "Wall", appName: "Idk App", Source: 3},
        {name: "Other Wall", appName: "Monkey App", Source: 3},
        {name: "Lobby Kiosk", appName: "Car App", Source: 3},
        {name: "Another Brick in the Wall", appName: "Pink Floyd App", Source: 3},
      ]
    }
  }
  </code></pre>
  
  <p>Parent component HTML:</p>
  
  <pre><code>&lt;div class="col-md-3" *ng-for="#display of displays"&gt;
      &lt;display-card name="{{display.name}}"&gt;&lt;/display-card&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Child component:</p>
  
  <pre><code>import {Component, View} from 'angular2/angular2';
  
  @Component({
    selector: 'display-card'
  })
  
  @View({
    templateUrl: './components/display-card/display-card.html'
  })
  
  export class DisplayCard{
    name: string;
  }
  </code></pre>
  
  <p>Child HTML:</p>
  
  <pre><code>&lt;div class="display-card"&gt;
      &lt;div class="display-card-header"&gt;
  
      &lt;/div&gt;
    &lt;div class="display-card-body"&gt;
      &lt;h1 class="display-card-title"&gt;{{name}}&lt;/h1&gt;
      &lt;h4 class="display-card-subtitle"&gt;&lt;/h4&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I added the <code>name</code> property to the child component since this is the error I'm getting when I try this out:</p>
  
  <pre><code>EXCEPTION: Can't bind to 'name' since it isn't a known property of the '&lt;display-card&gt;' element and there are no matching directives with a corresponding property
  </code></pre>
  
  <p>Is this even possible with components?</p>