text: Q:
  
  how to handle events in nested recursive component
  
  I'm trying to build a tree component where od-tree-node component is nested recursively to build child nodes. I'm having problem with handling events. 
  For click events on the leaf node, the mouse event always triggers as if the event occurred on the the top most component. I'm not sure how to handle this.
  The expected behavior: When the user clicks on leaf/parent/root node the parent component (ex: app.component.ts) needs to know what node was clicked.
  Current behavior: No matter which node is clicked, the root node is selected (emitted to parent component)
  plunker: https://plnkr.co/edit/JZTlA5?p=preview
  Here's the template:
  node.component.html
  <!-- parent node -->
  <label [attr.for]="resource.resourceType" [class]="cssClasses" *ngIf="resource.hasChildren()" [hidden]="matchedChildrenCount(search, resource) === 0">
       <a (click)="toggleNode($event)"> <i [class]="getNodeStateIcon()"></i></a>
       <input type="checkbox" *ngIf="showCheckboxes" [checked]="selected">
       <a [title]="resource.resourceName" (click)="selectNode($event);">
          <i [class]="resource.getIcon()"></i> {{resource.resourceName}} | {{ matchedChildrenCount(search, resource) | lpad : 2 : '0'}}
       </a>
  </label>
  <!-- leaf node -->
  <label [attr.for]="resource.resourceType" [class]="cssClasses" *ngIf="!resource.hasChildren()" [hidden]="!isMatched(search, resource)">
       <input type="checkbox" *ngIf="showCheckboxes" [checked]="selected">
       <a [title]="resource.resourceName" (click)="selectNode($event);">
          <i class="icon-status-indicator"></i> {{resource.resourceName}}
          <div class="group" *ngIf="resource?.group !== 'Default'">{{resource.group}}</div>
       </a>
  </label>
  <!-- recrusive child nodes -->
  <ul *ngIf="resource.expanded">
    <li *ngFor="let child of resource?.children">
      <od-tree-node
        [resource]="child"
        [search]="search"
        (selected)="selectNode($event)"
        ></od-tree-node>
    </li>
  </ul>
  
  node.component.ts
  @Component({
      moduleId: module.id,
      selector: 'od-tree-node',
      templateUrl: 'node.component.html',
      styleUrls: ['node.component.css'],
      changeDetection: ChangeDetectionStrategy.OnPush
  })
  export class NodeComponent implements OnInit, OnChanges, OnDestroy {
    @Input() resource: TreeNode;
  
    @Output() selected = new EventEmitter<TreeNode>();
  
    cssClasses: string;
  
    /**
     * select/unselect node
     *
     */
    selectNode(event: MouseEvent) {
      if(event instanceof MouseEvent) {
           event.preventDefault();
           event.stopPropagation();
        }
      this.resource.selected = true;
      this.cssClasses = this.setCssClasses();
      this.selected.emit(this.resource);
    }
   ...
   ....
   ....
  }
  
  A:
  
  In your case every node is sending itself to its parent and thus app component always get root node of the tree. Solution is that in case of click event send that node itself to the parent node else just pass on what is received from eventemitter of child node.
  selectNode(event: MouseEvent) {
      console.log(event)
      let selNode: any;
      if(event instanceof MouseEvent) {
           event.preventDefault();
           event.stopPropagation();
           selNode = this.resource
      } else {
          selNode = event
      }
      this.selected.emit(selNode);
  }
  
  