Angular2 tree component click event

Question

how to implement angular tree component node click event.

import { TREE_ACTIONS, KEYS, IActionMapping } from 'angular2-tree-component';

const actionMapping:IActionMapping = {
  mouse: {
    click: TREE_ACTIONS.TOGGLE_SELECTED_MULTI
  },
  keys: {
    [KEYS.ENTER]: (tree, node, $event) => alert(`This is   ${node.data.name}`)
  }  
}

Answer 1

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 ie

<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.

Answer 2

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();
}

Answer 3

You can bind different events as explained in this example

Example:

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

Answer 4

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 eg $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);
}