CODEWITHSUNDEEP
angularprimeng
bigskull
bigskull

Reputation: 591

PrimeNG p-tree error: Can't bind to 'value' since it isn't a known property of 'p-tree'

I'm using PrimeNG in my Angular2 webapp and I want to use p-tree component. I imported TreeModule in app.module:

import { TreeModule } from 'primeng/primeng';
@NgModule({
 imports: [
  TreeModule,
  ...
 ]
})

My component is:

import { TreeNode } from 'primeng/primeng';
...
export class MyComponent implements OnInit {
 treeNode: TreeNode[];
 ngOnInit() {
  //Simple value for test p-tree
  this.treeNode = [
      {
        "label": "Documents: " + this.doc,
      },
      {
        "label": "Documents: " + this.doc,
        "children": [{
                    "label": "Work",
                },
                {
                    "label": "Home",
                }]
      }
    ]
 }
}

And finally in html:

<p-tree [value]="treeNode"></p-tree>

The error is:

zone.js:569 Unhandled Promise rejection: Template parse errors:
Can't bind to 'value' since it isn't a known property of 'p-tree'.
1. If 'p-tree' is an Angular component and it has 'value' input, then verify that it is part of this module.
2. If 'p-tree' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (<p-tree [ERROR ->][value]="treeNode"></p-tree>)

'p-tree' is not a known element:
1. If 'p-tree' is an Angular component, then verify that it is part of this module.
2. If 'p-tree' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (
    [ERROR ->]<p-tree [value]="treeNode"></p-tree>
)
 Task: Promise.then ; Value: Error: Template parse errors:
Can't bind to 'value' since it isn't a known property of 'p-tree'.
1. If 'p-tree' is an Angular component and it has 'value' input, then verify that it is part of this module.
2. If 'p-tree' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (<p-tree [ERROR ->][value]="treeNode"></p-tree>)

I found similar thred but I can't found a good solution. Can you help me? Very thanks.

SOLVED

I solved moving import in right file. My app has a custom file for importing modules, so it needs to put here the import and not in app.module file.

Upvotes: 2

Views: 12412

Answers (4)

John
John

Reputation: 433

I know it is an old post but answering here if it may useful for someone. In my case importing TreeModule inside app.module.ts resolves the issue.

import { TreeModule} from 'primeng/tree';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    TreeModule
  ],
  providers: []
  ...
})

Upvotes: 0

Pardeep Jain
Pardeep Jain

Reputation: 86800

Update

In the latest of version of Primeng and Angular, import should be like this -

import {TreeModule} from 'primeng/tree';
import {TreeNode} from 'primeng/api';

For more information refer in details -

Upvotes: 0

bigskull
bigskull

Reputation: 591

SOLVED

I solved moving import in right file. My app has a custom file for importing modules, so it needs to put here the import and not in app.module file.

Upvotes: 2

BillF
BillF

Reputation: 864

be sure to import Tree in your component. example:

import { Tree, TreeNode } from 'primeng/primeng';

Upvotes: 1

Related Questions