Angular 4 Can't bind to <property> since it isn't a known property of <component>

Question

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.

Console error:

Unhandled Promise rejection: Template parse errors: Can't bind to 'data' since it isn't a known property of 'tree'. ("<tree [ERROR ->][data]="data"></tree>"): 

My tree-view-component.ts:

@Component({     selector: 'app-tree-view',     template: '<tree [data]="data"></tree>' }) 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() { }  } 

Here is my complete script file: https://pastebin.com/hDyX2Kjj

Is there anyone know about this? TiA

Answer 1

Every component, directive, and pipe needs to be registered in @NgModule()

@NgModule({   declarations: [TreeViewComponent] }) export class AppModule {} 

For more details see

• https://angular.io/api/core/NgModule
• https://angular.io/guide/ngmodules
• https://angular.io/guide/ngmodule-api

Answer 2

I've the same error, when run test for ParentComponent. Inside was ChildComponent component with @Input property: string;. Both components were also declared inside app.module.ts.

I've fixed this like that (parent component test file):

  beforeEach(async(() => {     TestBed.configureTestingModule({       declarations: [ParentComponent, ChildComponent]// added child component declaration here     })       .compileComponents();   }));