Angular 4 Can't bind to 'data' since it isn't a known prop.

import { Component, Input, OnInit } from '@angular/core';

@Component({
  inputs: ['item'],
  selector: 'node',
  template: `
    <li>
      <a class="iconButton" (click)="toggle()"> <i class="material-icons">Add</i>{{ item.label }}, {{ IsExpanded }}</a>
      <div *ngIf="IsExpanded">
        <ul *ngIf="item.subs">
          <template *ngFor="let subitem of item.subs">
            <node [item]="subitem"></node>
          </template>
        </ul>
      </div>
    </li>
  `
})
class Node implements OnInit {
  @Input() item: any;
  IsExpanded: boolean = false;
  ngOnInit() {
    console.log(this.item);
  }
  toggle() {
    this.IsExpanded = !this.IsExpanded;
    console.log(this.IsExpanded + ' ' + this.item.label);
  }
}

@Component({
  inputs: ['data'],
  selector: 'tree',
  template: `
    <ul>
      <template *ngFor="let item of data">
        <node [item]="item"></node>
      </template>
    </ul>
  `
})
class Tree {
  @Input() data: any[];
}

@Component({
  inputs: ['data'],
  selector: 'app-tree-view',
  template: '<tree [data]="data"></tree>'
})
export class TreeViewComponent {

  @Input()
  data: any[] = [
      {
        label: 'a1',
        subs: [
          {
            label: 'a11',
            subs: [
              {
                label: 'a111',
                subs: [
                  {
                    label: 'a1111'
                  },
                  {
                    label: 'a1112'
                  }
                ]
              },
              {
                label: 'a112'
              }
            ]
          },
          {
            label: 'a12',
          }
        ]
      },
      {
        label: 'b1',
        subs: [
          {
            label: 'b11',
          },
          {
            label: 'b12',
          }
        ]
      }
  ];

}