title: Angular 4 Can't bind to <property> since it isn't a known property of <component>
body: <p>I'm trying to create my own directive in Angular 4. But, I got this error when bind the property of class into component template.</p>
  
  <p>Console error:</p>
  
  <pre class="lang-none prettyprint-override"><code>Unhandled Promise rejection: Template parse errors: Can't bind to
  'data' since it isn't a known property of 'tree'. ("&lt;tree [ERROR
  -&gt;][data]="data"&gt;&lt;/tree&gt;"):
  </code></pre>
  
  <p>My tree-view-component.ts:</p>
  
  <pre><code>@Component({
      selector: 'app-tree-view',
      template: '&lt;tree [data]="data"&gt;&lt;/tree&gt;'
  })
  export class TreeViewComponent implements OnInit {
  
      @Input() data: any[];
  
      constructor() {
          this.data = [
          {
              label: 'a1',
              subs: [
                  {
                      label: 'a11',
                      subs: [
                          {
                              label: 'a111',
                              subs: [
                                  {
                                      label: 'a1111'
                                  },
                                  {
                                      label: 'a1112'
                                  }
                              ]
                          },
                          {
                              label: 'a112'
                          }
                      ]
                  },
                  {
                      label: 'a12',
                  }
              ]
           }
       ];
    }
  
    ngOnInit() { }
  
  }
  </code></pre>
  
  <p>Here is my complete script file: <a href="https://pastebin.com/hDyX2Kjj" rel="noreferrer">https://pastebin.com/hDyX2Kjj</a></p>
  
  <p>Is there anyone know about this? TiA</p>