title: Getting data to the component with input
body: <p>How to getting data from one page to another page but it's show error  i new to angular</p>
  
  <p>TypeError: Cannot read property 'id' of undefined in [{{ mediaItem.id}} in MediaItemComponent</p>
  
  <p>how to get data</p>
  
  <p>first.html</p>
  
  <pre><code>&lt;section&gt;
      &lt;media-item [mediaItem]="firstMediaItem"&gt;&lt;/media-item&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>first.ts</p>
  
  <pre><code>import {Component} from 'angular2/core';
  import {MediaItemComponent} from './secound';
  
  @Component({
      selector: 'media-tracker-app',
      directives: [MediaItemComponent],
      templateUrl: 'app/app.component.html',
      styleUrls: ['app/app.component.css']
  })
  export class AppComponent {
      firstMediaItem = {
          id: 1,
          name: "Firebug",
          medium: "Series",
          category: "Science Fiction",
          year: 2010,
          watchedOn: 1294166565384,
          isFavorite: false
      };
  }
  </code></pre>
  
  <p>secound.html</p>
  
  <pre><code>&lt;h2&gt;{{ mediaItem.id }}&lt;/h2&gt;
  &lt;div&gt;Watched on {{ mediaItem.watchedOn }}&lt;/div&gt;
  &lt;div&gt;{{ mediaItem.category }}&lt;/div&gt;
  &lt;div&gt;{{ mediaItem.year }}&lt;/div&gt;
  </code></pre>
  
  <p>secound.ts</p>
  
  <pre><code>import {Component, Input} from 'angular2/core';
  
  @Component({
      selector: 'media-item',
      templateUrl: 'app/media-item.component.html',
      styleUrls: ['app/media-item.component.css']
  })
  export class MediaItemComponent {
      @Input('mediaItemToWatch') mediaItem;
  }
  </code></pre>