Angular2 tree component click event

One simple thing that's worth underlining here is the actual allocation of the options object to the tree object. This takes place in the template i.e.

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

Then in the component.ts make sure you hook it up as follows:

treeOptions = { actionMapping: this.actionMapping }

Took a few minutes to work this out and the docs are a bit lacking in this regard.

You can bind different events as explained in this example

Example:

<tree-root [nodes]="nodes"
    (activate)="someMethodInComponent($event)"
    (deactivate)="someOtherMethodInComponent($event)">
</tree-root>

Just giving you one example of click event

import { TreeNode, TreeModel, TREE_ACTIONS, KEYS, IActionMapping, ITreeOptions } from 'angular-tree-component';


const actionMapping:IActionMapping = {
mouse: {
click: (tree, node, $event) => {
  $event.shiftKey
    ? TREE_ACTIONS.TOGGLE_SELECTED_MULTI(tree, node, $event)
    : TREE_ACTIONS.TOGGLE_SELECTED(tree, node, $event)
}
   }
 };

@Component({
      selector: 'category',
      template: `  <div class="d-inline-block">
                  <tree-root #tree [nodes]="categories">
                    <ng-template #treeNodeTemplate let-node let-index="index">
                        <span>{{ node.data.name }}</span>
                        <button (click)="addNode(tree)">add</button>
                    </ng-template>
                 </tree-root>
                </div>`,
      styles : [styles]
})

export class Category implements OnInit {
public categories :any;
  addNode(tree) {
      this.categories[0].children.push({
      name: 'a new child'
  });
   tree.treeModel.update();
}

When you click on any node it is selected and (activate) event is emitted. you can add a method on this event by passing $event as prop. Then you can get the clicked node by implementing that method in your component.ts file e.g $event.node

component.html file

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

component.ts file

public onClick(event) {
  console.log('>> onClick', event.node.data);
}