The Tree component is used to display a hierarchical representation of data in a graphical format. It provides an array of the TreeNode objects as its value. The TreeNode API provides many properties to create tree node objects. The tree structure has basically three major components as listed here:
- The tree elements are called nodes
- The lines connecting elements are called branches
- The nodes without children are called leaf nodes or leaves
A basic example of a Tree component with nodes would be written as follows (the node will represent tourist places):
<p-tree [value]="basicTree"></p-tree>
The data for the Tree component should be provided in a nested parent-child hierarchy. Each tree node is created with a set of properties such as label, data, expandIcon, collapsedIcon, children, and so on. The complete list of the TreeNode properties is shown here:
| Name | Type | Default | Description |
| label | string | null | Label of the node. |
| data | any | null | Data represented by the node. |
| icon | string | null | Icon of the node to display next to content. |
| expandedIcon | string | null | Icon to use in expanded state. |
| collapsedIcon | string | null | Icon to use in collapsed state. |
| children | TreeNode[] | null | An array of tree nodes as children. |
| leaf | boolean | null | Specifies if the node has children. Used in lazy loading. |
| style | string | null | Inline style of the node. |
| styleClass | string | null | Style class of the node. |
| expanded | boolean | null | Whether the node is in an expanded or collapsed state. |
| type | string | null | Type of the node to match the ng-template type. |
| parent | TreeNode | null | Parent of the node. |
| styleClass | string | null | Name of the style class for the node element. |
| draggable | boolean | null | Whether to disable dragging for a particular node even if draggableNodes is enabled. |
| droppable | boolean | null | Whether to disable dropping for a particular node even if droppableNodes is enabled. |
| selectable | boolean | null | Used to disable selection of a particular node. |
The tree node structure for the tourist places example would be as follows:
"data":
[
{
"label": "Asia",
"data": "Documents Folder",
"expandedIcon": "fa-folder-open",
"collapsedIcon": "fa-folder",
"children": [{
"label": "India",
"data": "Work Folder",
"expandedIcon": "fa-folder-open",
"collapsedIcon": "fa-folder",
"children": [{
"label": "Goa", "icon": "fa-file-word-o",
"data": "Beaches& Old Goa colonial architecture"},
{"label": "Mumbai", "icon": "fa-file-word-o", "data":
"Shopping,Bollywood"},
{"label": "Hyderabad", "icon": "fa-file-word-o",
"data": "Golconda Fort"}
]
},
{
"label": "Singapore",
"data": "Home Folder",
"expandedIcon": "fa-folder-open",
"collapsedIcon": "fa-folder",
"children": [{
"label": "Woodlands", "icon": "fa-file-word-o",
"data": "Parks,Sea food"}]
},
]
}
...
]
In real-time applications, the data located in a remote data source is retrieved through services. The following service is going to be injected in the component class:
@Injectable()
export class TreeNodeService {
constructor(private http: Http) { }
getTouristPlaces(): Observable<any[]> {
return this.http.get('/assets/data/cities.json')
.map(response => response.json().data);
}
}
The component class loads the data on page load using the service call as shown here:
basicTree: TreeNode[];
constructor(private nodeService: TreeNodeService) { }
ngOnInit() {
this.nodeService.getTouristPlaces().subscribe(
(places: any) => this.basicTree = places);
}
The following screenshot shows a snapshot result of the hierarchical Tree component representation as an example:
In the preceding use case, we expanded India and Germany country tree nodes to see their child nodes represented as tourist places.