How to create a custom tree component in angular 5.I am a beginner in angular.I have no idea.
"+" Button create new node and "Add Route" Button create sub node. Each node contains two drop down to select values.
Add a comment
|
1 Answer
Basically you need to recursively call a component. Here is a simple example:
node.model.ts
export class Node {
children: Node[];
text: string;
}
tree.component.ts
@Component({
selector: 'tree',
template: `<h1>Tree component</h1>
<div *ngFor="let node of tree">
<node [node]="node"></node>
</div>
<button (click)="addNodeTo()">add node</button>
`,
styles: [`h1 { font-family: Lato; }`]
})
export class TreeComponent implements OnInit {
tree: Node[] = [];
ngOnInit(){
let firstNode = {
children: [],
text: 'first'
}
this.tree.push(firstNode);
}
addNodeTo(){
let newNode = {
children: [],
text: 'newNode',
}
this.tree.push(newNode);
}
and the node.component.ts, which is called recursively :
@Component({
selector: 'node',
template: `
{{node.text}} <button (click)="addChildren(node)">Add children</button>
<div *ngFor="let children of node.children">
<node [node]='children'></node>
</div>
`,
styles: [`h1 { font-family: Lato; }`]
})
export class NodeComponent implements OnInit {
@Input() node: Node;
ngOnInit(){
}
addChildren(node: Node){
let newNode = {
children: [],
text: node.text + `'s child`
}
node.children.push(newNode);
}
Here is a stackblitz without styles but you will understand the logic.
5 Comments
Ashok
In my api response children are not array.
Ashok
"flow":{ "children":{ "2":{ "children":{}, "data":{"id":"ggfg"}, }, "4":{ "children":{ "7":{ "children":{}, "data":{"id":"effgfdv"}, } }, "data":{"id":"fgdfgdg"}, } }, "data":{"id":"fghhhj"}, },
Ashok
Is any way to convert to json to array
Augustin R
Yes, you can do it front-end side, maybe using a recursive function too. You could have a look at lodash for Objects/Arrays handling.
Ashok
Can you help me to do the same with netsted node, I am using nested JSON