title: Binding Error in Angular 2
body: <p>I am building a simple tweet application and here is my code snippets. When running this app, I am getting the below error:</p>
  
  <blockquote>
    <p>EXCEPTION: Template parse errors: Can't bind to 'data' since it isn't
    a known native property ("</p>
  
  <pre><code>    &lt;div *ngFor="#tweet of tweetList" &gt;
         &lt;tweet [ERROR -&gt;][data]="tweet"&gt;&lt;/tweet&gt;        
      &lt;/div&gt;  
  </code></pre>
    
    <p>"): TweetsComponent@3:18</p>
  </blockquote>
  
  <p>I did a search with this error, and have checked against all the root causes that could lead to this error, and it looks all fine to me.</p>
  
  <p>Here is my components and services:</p>
  
  <p>TweetService:</p>
  
  <pre><code>export class TweetService{
  
  getTweetService() {
  
      return [
              {
                  imageUrl: "http://lorempixel.com/100/100/people/?1",
                  author: "Windward",
                  handle:"@windwardstudios",
                  tweetText:"Looking for a better company reporting or docgen app?"
  
              },
              {
                  imageUrl: "http://lorempixel.com/100/100/people/?2",
                  author: "AngularJS News",
                  handle:"@angularjs_news",
                  tweetText:"Right Relevance : Influencers, Articles and Conversations"
  
              },
              {
                  imageUrl: "http://lorempixel.com/100/100/people/?3",
                  author: "UX &amp; Bootstrap",
                  handle: "@3rdwave",
                  tweetText: "10 Reasons Why Web Projects Fail"
  
              }
      ];
  }
  }
  </code></pre>
  
  <p>TweetsComponent:</p>
  
  <pre><code>import {Component} from 'angular2/core';
  import {TweetService} from './tweet.service';
  import {TweetComponent} from './tweet.component';
  @Component({
  
  selector:'tweets',
  template:
  `
  
      &lt;div *ngFor="#tweet of tweetList" &gt;
         &lt;tweet [data]="tweet"&gt;&lt;/tweet&gt;        
      &lt;/div&gt;  
  
  `,
  providers: [TweetService],
  directives: [TweetsComponent]
  })
  
  export class TweetsComponent{
  tweetList;
  
  constructor(tweetService: TweetService){
  
      this.tweetList = tweetService.getTweetService();
  }
  
  }
  </code></pre>
  
  <p>TweetComponent:</p>
  
  <pre><code>import {Component, Input } from 'angular2/core';
  
  @Component({
  
  selector:'tweet',
  template:
  `
  &lt;div class="media"&gt;
      &lt;div class="media-left"&gt;
          &lt;a href="#"&gt;
          &lt;img class="media-object" src="{{ data.imageUrl }}" alt="media-object"&gt;
          &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="media-body"&gt;
          {{ data.author }} &lt;span class="handle"&gt;{{ data.handle }}&lt;/span&gt;
          {{ data.tweetText }}            
      &lt;/div&gt;
  &lt;/div&gt;    
  `,
  styles:[
      `
      .media{
          margin-left: 30px;
          margin-top: 20px;
      }
      .handle{
          color: #ccc;
      }
  
      `
    ]
  })
  
  export class TweetComponent{
     constructor(){
         console.log(this.data)
     }
     @Input() data;
  
  }
  </code></pre>
  
  <p>Any help would be much appreciated.</p>
  
  <p>Thanks in advance!!!</p>