I use primeng's tree-select compoment. I have a tree of objects which have name property in each object. However, primeng tries to find label property. Althoug I have label property in my objects, I want to bind name property, not label.

Actually, I used optionLabel and optionValue for select component, and what I am asking is are there such properties for tree-select component also? If not, how can I solve this problem?

I use primeng's tree-select compoment. I have a tree of objects which have name property in each object. However, primeng tries to find label property. Althoug I have label property in my objects, I want to bind name property, not label.

Actually, I used optionLabel and optionValue for select component, and what I am asking is are there such properties for tree-select component also? If not, how can I solve this problem?

• angular
• typescript
• frontend
• primeng

• please share the minimal reproducible code, data object, try to replicate the problem in primeng stackblitz examples – Naren Murali Commented Mar 6 at 13:00

1 Answer 1

Well if you review carefully the primeng tree select documentation here you will notice that the options input is of type options TreeNode<any>[] hence you have to construct an array of TreeNode objects based on your data. Another look in the documentation this time for the TreeNode itself tells us that the most important properties of the TreeNode object are label, data, key, checked, children, parent therefore you have to build a tree like data structure based on your hierarchical data where you can use each data item's name for a label of the newly built TreeNode object that wraps the data item. Here is an example of a TreeNode structure wrapped around a Directory tree

const treeNode = {
  key: dashboardFolder.id,
  label: dashboardFolder.name,
  data: {
    id: dashboardFolder.id,
    name: dashboardFolder.name,
    displayName: dashboardFolder.name,
    type: DashboardNodeType.Folder,
    hasChildDashboards: dashboardFolder.hasChildDashboards
  },
  parent: parentTreeNode,
  children: [] as TreeNode<{ id: string; name: string;[key: string]: any }>[],
  expandedIcon: 'pi pi-folder-open',
  collapsedIcon: 'pi pi-folder',
  expanded: false,
  selectable: type === DashboardNodeType.Folder
} as TreeNode<DashboardFolder>;

in the sample above the name of the directory (folder) is used as a label for the TreeNode i.e. this is exactly what you are asking for using name for TreeNode label. You have to map all of your data items to TreeNode object in a similar way maintaining the hierarchical tree structure in the same time.