Extract data from tree.

[atlantageek]

Is there a function to extract data from the ng2-tree component.

[rychkog]

@atlantageek No there is no such API yet. Could you, please, describe your use case? Why do you need it back from a tree?

[avadhootha]

@rychkog I don't know if @atlantageek use case is same as mine, but here it goes.
Suppose I built the Tree via Add NewFolder or NewTag Menu options, I would like to get the tree model with the same structure { value: 'Parent', Children: { value: 'child' , children: [] } } so that I can retrieve and save my data accordingly. Currently there are event handlers through which we get the details of only node which has been modified/deleted/added, not the whole tree Model.

Even if I refer the template with a name and try to access the tree model, I get the updated data of type Tree but not the TreeModel data

[Anoop-Goudar]

Even I want to extract data from the dynamically created tree and store it in the database. Next time when I want to load the tree, I can pull the data from db which has latest updates and show it in the tree.
Any updates on extracting data from the tree ?

[avadhootha]

@Anoop-Goudar This is how I did for now.
You could write a simple function of your own to transform the tree (get the reference of the tree) to the TreeModel structure (this is the form of input we give to the tree directive). I build this TreeModel whenever there is a change in the tree Structure, i.e on nodeRenamed, nodeCreated, nodeMoved, nodeDeleted events.

I will add my code once I get back to office, which will be on Monday. Sorry for the delay.

[rychkog]

@Anoop-Goudar Could you, please, make a PR of your implementation? All the users will benefit from this

[Anoop-Goudar]

@avadhootha, even I had started handling using event handlers. But it would be a great help if you add your code here.

[avadhootha]

@Anoop-Goudar
Here is how I did it -
I created a directive of my own to have this tree model generated.
My Custom Directive
import {Ng2TreeSettings, Tree, TreeModel} from 'ng2-tree';

import {Component, EventEmitter, Input, Output, ViewChild} from '@angular/core';

@component({
selector: 'app-tree',
templateUrl: './app-tree.component.html',
styleUrls: ['./app-tree.component.css']
})
export class AngularTreeComponent {
@ViewChild('treeTemplate') treeTemplate: Tree;
@input() tree: TreeModel;
@output() nodeRemoved: EventEmitter = new EventEmitter();
@output() nodeRenamed: EventEmitter = new EventEmitter();
@output() nodeSelected: EventEmitter = new EventEmitter();
@output() nodeMoved: EventEmitter = new EventEmitter();
@output() nodeCreated: EventEmitter = new EventEmitter();
@output() nodeExpanded: EventEmitter = new EventEmitter();
@output() nodeCollapsed: EventEmitter = new EventEmitter();
@output() treeChange: EventEmitter = new EventEmitter();

settings: Ng2TreeSettings = {
rootIsVisible: true
};

handleRemoved($event) {
this.nodeRemoved.emit($event);
this.emitTree();
}

handleRenamed($event) {
this.nodeRenamed.emit($event);
this.emitTree();
}

handleSelected($event) {
this.nodeSelected.emit($event);
}

handleMoved($event) {
this.nodeMoved.emit($event);
this.emitTree();
}

handleCreated($event) {
this.nodeCreated.emit($event);
this.emitTree();
}

handleExpanded($event) {
this.nodeExpanded.emit($event);
}

handleCollapsed($event) {
this.nodeCollapsed.emit($event);
}

private emitTree() {
if (this.treeTemplate && this.treeTemplate['tree']) {
const treeModel = this.buildModelFromTree(this.treeTemplate['tree']);
this.treeChange.emit(treeModel);
}
}

private buildModelFromTree(tree) {
const model: TreeModel = {
value: '',
children: [],
settings: tree.node.settings
};
model.value = tree.node.value;
if (tree.children) {
tree.children.forEach(child => {
model.children.push(this.buildModelFromTree(child));
});
}
return model;
}
}

Tree.component.html
<tree #treeTemplate [tree]="tree" [settings]="settings" (nodeRemoved)="handleRemoved($event)" (nodeRenamed)="handleRenamed($event)" (nodeSelected)="handleSelected($event)" (nodeMoved)="handleMoved($event)" (nodeCreated)="handleCreated($event)" (nodeExpanded)="handleExpanded($event)" (nodeCollapsed)="handleCollapsed($event)"> </tree>

And use it like this wherever you need the tree
<app-tree [(tree)]=tree></app-tree>

Note that the tree inside the square brackets is wrapped with special brackets. This is for two-way binding

As per the request of @rychkog I will create a PR in a few minutes for the same. Code might not be super clean but does the work and solves my use case.

[Anoop-Goudar]

@avadhootha thank you 👍

[avadhootha]

@rychkog @Anoop-Goudar Here is the PR request #159

I am new to PR Requests, so ignore if there are any mistakes.