2

I have one main component and one child

<main>
     <child 
        [nodes]="nodes" 
        (nodeChanged)="someFunction(output)">
     </child>
<main>

Child component renders multilevel tree structure recursively (i.e. it renders itself if there are children) in which every node is clickable, irrespective of it is terminal node or not.

In child component every node has a click event registered "clickedNode()". Now because I don't want my click event to bubble up to clicked node's head I wrote "event.stopPropagation()" in "clickedNode()" function.

@Output() nodeChanged = new EventEmitter<Object>();

clickedNode(selectedNode, e:MouseEvent){
    this.nodeChanged.emit(selectedNode);
    e.stopPropagation();
}

Now the problem is @output emitter doesn't if inner level of component gets clicked. It emits only if level one nodes are clicked.

Prateek Jain
  • 86
  • 3
  • 1
    I can guess only 1 reason for that, `e` is not defined at some point and `clickedNode` crashes. Check the console. `@Output` and mouse events are not connected to each other at all. – Dimanoid May 08 '19 at 08:44
  • is selectedNode actually the event being passed in by your method? Try removing the first parameter passed into your clickedNode method clickedNode( e:MouseEvent) - you aren't actually passing a node into the method you are calling – David May 08 '19 at 08:54
  • @David `(click)="clickedNode(node, $event)"` selectedNode is the value I am passing from html i.e. node object which got clicked – Prateek Jain May 09 '19 at 03:26
  • @David Html is of parent component and "clickedNode" function is written in child component. I have edited the question to make it clear – Prateek Jain May 09 '19 at 03:33
  • Just taking a stab but.... Call `stopPropogation()` before you call `this.nodeChanged.emit(selectedNode)` – ttugates May 09 '19 at 03:58

2 Answers2

0

You can implement two click method for it.One is for stopPrapogation and another one is for EventEmitter

HTML

<div (click)="$event.stopPropagation()" (click)="clickedNode(<data you want to pass>)"> 
</div>

TS

@Output() nodeChanged = new EventEmitter<Object>();

clickedNode(selectedNode){
    this.nodeChanged.emit(selectedNode);
}

I hope it helps you out.

Yash Rami
  • 2,276
  • 1
  • 10
  • 16
0

The main thing is that in the HTML you are passing one value and this function expects to receive two values. If you want to access to the node clicked you can do it through the event by itself

JuanmaPérez
  • 79
  • 2
  • 10
  • Html is of parent component and "clickedNode" function is written in child component. I have edited the question to make it clear – Prateek Jain May 09 '19 at 03:32
  • Then we need the code from the child to be sure you are doing well in the event declaration in the child component HTML – JuanmaPérez May 13 '19 at 10:00