The tree is populated with help of AJAX request to a server JSONPlaceholder.
There are 3 kinds of items (leafs):
1. User 2. Post 3. Comment
Start with names of users.
ngOnInit() {
this.tree = new Tree(this.onClick.bind(this));
this.reqService.fetchUsers()
.map(users => users.map(user => new Leaf('name', new User(user), true, 'fa-user'))
)
.subscribe(
(leaves) => {
this.tree.insertLeaves(leaves);
},
() => alert('error')
);
}
Description of the code above:
Callback function on leaf click:
onClick(data: User | Post | Comment, isVisited: boolean, leaf: Leaf) {
// reset selected objects
this.user = null;
this.post = null;
this.comment = null;
// 1. User
if (data instanceof User) {
this.user = {...data};
if (!isVisited) {
this.reqService.fetchPosts(data)
.map(
posts => {
return posts.map(post => new Leaf('title', new Post(post), true, 'fa-edit'));
}
)
.subscribe(
(leaves) => {
this.tree.insertLeaves(leaves, leaf);
},
() => alert('error')
);
}
}
// 2. Post
else if (data instanceof Post) {
this.post = {...data};
if (!isVisited) {
this.reqService.fetchComments(data)
.map(
comments => {
return comments.map(comment => new Leaf('name', new Comment(comment), false, 'fa-comment'));
}
)
.subscribe(
(leaves) => {
this.tree.insertLeaves(leaves, leaf);
},
() => alert('error')
);
}
}
// 3. comment
else {
this.comment = {...data};
}
}
The callback gets 3 parameters:
If a leaf was not open (visited) previously then need to create its children leaves and insert them into clicked branch (leaf).
A reference to the current object is updated.
Data bound to the selected leaf is changing with help of the following function:
saveDataInLeaf(data: User | Post | Comment) {
this.tree.setSelectedLeafData(data);
}
While creating of leaves, a field as a label was pointed out. So changing of its value will be reflected in UI output.
Note: if no need to change a label of leaves then possible to pass some static text instead of a field name. For example, a field value.