angular 2 tree component click event

Question

In my angular2 project i have implemented angular tree component.i am using the following json data

nodes = [
{
  id: 1,
  name: 'root1',
  isExpanded: true,
  children: [
    { id: 2, name: 'child1' },
    { id: 3, name: 'child2' }
  ]
},
{
  id: 4,
  name: 'root2',
  children: [
    { id: 5, name: 'child2.1' },
    {
      id: 6,
      name: 'child2.2',
      children: [
        { id: 7, name: 'subsub' }
      ]
    }
  ]
}
];

And my html template is,

<tree-root [nodes]="nodes"></tree-root>

getNodeName()
{
//display selected node name
 console.log();
}

Tree displaying in my tree,but my problem is, how can i get clicked node details. i want to print selected node name inside the getNodeName() function.

What are clicked node details? Where do you want to get the from? What have you tried? What is the problem? — Günter Zöchbauer
– Günter Zöchbauer, Commented Mar 10, 2017 at 5:52
node details are id and name. For example, when i click on root2 node i want to get id:4 and name: root2. — Basil Joy
– Basil Joy, Commented Mar 10, 2017 at 5:57
Please provide more code. Where do you want to get the details? — Günter Zöchbauer
– Günter Zöchbauer, Commented Mar 10, 2017 at 5:59

Nam Nguyễn Khoa · Accepted Answer · 2017-03-31 07:31:09Z

1

You need to handle event on each node of tree and fire it.
On <tree root> component:
@Output() clickNode = new EventEmitter<Node>(); // with Node is class of data for node.

in template:
...
<your-tree-item (click)="clickHandler(node)"></your-tree-item>
...
clickHandler(node: Node){
this.clickNode.emit(node)
}

Using your tree:
<tree-root (clickNode)="yourHandler($event)"></tree-root>

yourHandler(node: Node) { alert(node.id) }

I also writing a virtual tree component for angular 2+. And it also support your case. You can find at: https://github.com/NamNgKh/angular2_virtual_tree

I going to make CSS theme for it. so other can easily change style of it.

edited Mar 31, 2017 at 7:31

answered Mar 31, 2017 at 7:14

Nam Nguyễn Khoa

312 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Taoufik · Accepted Answer · 2018-07-04 15:20:10Z

1

If you use "angular-tree-component", this will get the name of your node. Then you could improve it:

in your .html:

<tree-root [nodes]="nodes" [options]="options" (click)="clickHandler($event)"></tree-root>

in your .ts:

clickHandler(event: any) {
    if (event && event.target && event.target.childNodes[0]) {
        console.log(event.target.childNodes[0].data)
    }
}

edited Jul 4, 2018 at 15:20

user1143634

answered Jul 4, 2018 at 14:59

Taoufik

111 bronze badge

Collectives™ on Stack Overflow

angular 2 tree component click event

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related