Menu
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
757
What does "Can't bind to 'x' since it isn't a known property of 'y'" mean? link. This error often means that you haven't declared the directive "x" or haven't imported the NgModule to which "x" belongs. Perhaps you declared "x" in an application sub-module but forgot to export it.
Use the @Input() decorator in a child component or directive to let Angular know that a property in that component can receive its value from its parent component. It helps to remember that the data flow is from the perspective of the child component.
if error changed to can't find p-steps or something like that, it means that your module can't access p-steps, so you need to check if it's exported on it's own module(in exports ), and also need to check if your module has imported the other module in providers.
Property binding in Angular helps you set values for properties of HTML elements or directives. Use property binding to do things such as toggle button functionality, set paths programmatically, and share values between components.
Every component, directive, and pipe needs to be registered in @NgModule()
@NgModule({ declarations: [TreeViewComponent] }) export class AppModule {} For more details see
76
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(); })); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
