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

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

You don't need to mark inputs twice, either ` inputs: ['data'],` or `@Input()` if you have both, one is redundant. Did you add `Node` to `declarations of `@NgModule()`? — Günter Zöchbauer, Mar 31 '17 at 05:41
https://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5 provides a ready to use Angular2 template - just press the "new" button and "Angular". — Günter Zöchbauer, Mar 31 '17 at 05:42
It was solved with added TreeNodeComponent, TreeComponent, adn TreeViewComponent to declarations array in @NgModule(). Is there another way to include TreeViewComponent only in @NgModule() without TreeNodeComponent and TreeComponent? Because I already included its in TreeViewComponent. — Justinus Hermawan, Mar 31 '17 at 05:49
Sorry, I don't know what you mean with "Because I already included its in TreeViewComponent." Do you mean `TreeViewModule`? — Günter Zöchbauer, Mar 31 '17 at 05:51
I did `import { TreeNodeComponent } from './tree-view.node.component';` in TreeComponent and `import { TreeComponent } from './tree.component';` in TreeViewComponent. Why should I include them again in app.module? Doesn't it enough with just including TreeViewComponent in declarations? — Justinus Hermawan, Mar 31 '17 at 05:57
TypeScript imports and declarations are two entirely different and unrelated concepts. Every component, directive, pipe, needs to be registered in `@NgModule({ declaration: []})`. Either in `AppModule` or a module added to `imports: []` of `AppModule` (direct or transitive). — Günter Zöchbauer, Mar 31 '17 at 06:00
Can it be the same if I create a TreeModule, which means it will be separated with AppModule, and add TreeNodeComponent, TreeComponent, and TreeViewComponent into TreeModule declarations, and then import TreeModule to AppModule, So, I don't need add them into AppModule declarations again? — Justinus Hermawan, Mar 31 '17 at 06:04
Exactly. This is called a feature module and will work fine. This makes it easier to reuse the tree in other modules. You need to import the module that contains directives you use into every module where you use them and directives (and components and pipes) can only be in `declarations: []` of exactly one module. — Günter Zöchbauer, Mar 31 '17 at 06:06

Günter Zöchbauer · Accepted Answer · 2018-09-07T08:54:52.237

27

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

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

For more details see

edited Sep 07 '18 at 08:54

answered Mar 31 '17 at 06:01

Günter Zöchbauer

623,577
216
2,003
1,567

1

How about this `tree.module.ts`: ' ... @NgModule({ declarations: [ TreeNodeComponent, TreeComponent, TreeViewComponent ] ... ... ' and in `app.module.ts`: ` imports: [ ... TreeModule ... ] ` Can it? – Justinus Hermawan Mar 31 '17 at 06:07
Yup, as mentioned below your question, that's usually the right way, but usually more difficult to understand for people not yet familiar with `@NgModule()`. But it seems you got it already ;-) – Günter Zöchbauer Mar 31 '17 at 06:13
@GünterZöchbauer: Can you please update the link? Current link is broken. – Bhavik Shah Sep 07 '18 at 07:54
@BhavikShah Thanks for the hint! Updated. – Günter Zöchbauer Sep 07 '18 at 08:55

score 6 · Answer 2 · answered Feb 14 '19 at 15:27

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

score 2 · Answer 3 · answered Nov 14 '17 at 13:28

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

score -1 · Answer 4 · answered Aug 16 '17 at 11:04

-1

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

answered Aug 16 '17 at 11:04

The Aelfinn

13,649
2
54
45

1

You should not import export and declare the Component in some other Module it is not part of – D4rth B4n3 Nov 14 '17 at 13:29

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

4 Answers4

Linked