Angular2 emit not working in child whilst using recursive component
<p>I have implemented a 'tree' list of categories for an Angular2 (Typescript) app I am developing. This component is supposed to allow you to be able to click on a category name (no matter whether it's a category or sub-category) and this will show products of the category.</p>

<p>My 'category-tree' component is a separate component and it is used recursively so I can traverse the category hierarchy correctly. For each category a span is generated with a 'click' event binded to it. When clicked I use the emit function to broadcast this information back to the parent component in order to update some variables there. </p>

<p>This functionality is working for top-level categories but the click is not working correctly when it is on a child category. The 
function which watches for the change does not receive any information.</p>

<p>Here is my code:</p>

<p>The function which logs out the information into my console. This is on the parent component:</p>

<pre><code>changeCategory(event) {
        console.log(event);
    }
</code></pre>

<p>The html for the parent which holds the directive tag and the emit event name (categoryChange):</p>

<pre><code>&lt;div id='left-menu-wrapper'&gt;
    &lt;div id='left-menu'&gt;
        &lt;h1&gt;{{title}}&lt;/h1&gt;
        &lt;h2&gt;Categories&lt;/h2&gt;
        &lt;ul class="categories"&gt;
            &lt;category-tree [categories]="categories" (categoryChange)="changeCategory($event)"&gt;&lt;/category-tree&gt;
        &lt;/ul&gt;
        &lt;div *ngIf="selectedCategory"&gt;
            {{selectedCategory.name}}
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div *ngIf="!contentLoaded" class='spinner'&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;product-view [product]="selectedProduct"&gt;&lt;/product-view&gt;
</code></pre>

<p>The child component:</p>

<pre><code>import { Component, Input, Output, EventEmitter, forwardRef } from 'angular2/core';

@Component({
    selector: 'category-tree',
    templateUrl: './app/views/category-tree.html',
    directives: [forwardRef(() =&gt; CategoryTree)],
    outputs: ['categoryChange']
})

export class CategoryTree {
    @Input() categories;
    public categoryChange:EventEmitter;
    constructor() {
        this.categoryChange =new EventEmitter();
    }

    categoryClick(category) {
        this.categoryChange.emit({
            value: category
        });
    }
}
</code></pre>

<p>And the recursive component html:</p>

<pre><code> &lt;li *ngFor="#category of categories"&gt;
    &lt;span (click)="categoryClick(category)" [class.selected]="category === selectedCategory"&gt;{{category.name}}&lt;/span&gt;
    &lt;ul *ngIf="category.sub_categories"  class='sub-category'&gt;
        &lt;category-tree [categories]="category.sub_categories"&gt;&lt;/category-tree&gt;
    &lt;/ul&gt;
&lt;/li&gt;
</code></pre>

<p>As you can see, I bind a click event to each category which is that current category iteration. This calls an emit function in the category-tree class with that information and broadcasts it back. Again this works with a parent category but not a child.</p>

<p>My thinking is that as a child's direct parent component isn't the app.component.ts this may be causing an issue? I'm not sure.</p>

<p>Any ideas?</p>

<p>Thanks</p>