CODEWITHSUNDEEP
angulartypescriptangular2-directives
Justinus Hermawan
Justinus Hermawan

Reputation: 1214

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

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

Upvotes: 24

Views: 60238

Answers (4)

Kamil Naja
Kamil Naja

Reputation: 6692

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();
  }));

Upvotes: 6

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657731

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

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

For more details see

Upvotes: 27

D4rth B4n3
D4rth B4n3

Reputation: 1278

As The Aelfinn pointed out if you are using your Component across Modules you need to export it. BUT you should not import, export and declare it in the Module you want to use it, since its not part of this Module !!!
So suppose you have a TreeViewStuffModule which declares the TreeViewComponent and a DoSomethingWithTreeViewModule where the TreeViewComponent is used in, your declarations would be as follows:

@NgModule({
  declarations: [
    TreeViewComponent
  ],
  exports: [
    TreeViewComponent
  ]
})
export class TreeViewStuffModule { }

@NgModule({
  imports: [
    TreeViewStuffModule
  ]
})
export class DoSomethingWithTreeViewModule

Upvotes: 2

The Aelfinn
The Aelfinn

Reputation: 17048

If you are using TreeViewComponent in another module, you will need to import the component into the @NgModule as follows:

@NgModule({
    imports: [TreeViewComponent],
    // This says that all components in this module can import TreeViewComponent
    exports: [ThisModulesComponents],
    declarations: [ThisModulesComponents]
})
export class ModuleDependentOnTreeViewComponent

Upvotes: -1

Related Questions