title: How to use Output in dynamically created component
body: <p>I am using this technique to dynamically create component:</p>
  
  <pre><code>import {
   Component, Input, ViewContainerRef, ViewChild, ReflectiveInjector,    ComponentFactoryResolver,
   Output, EventEmitter
   } from '@angular/core';
  
   @Component({
   selector: 'dynamic-component',
   template: `
   &lt;div #dynamicComponentContainer&gt;&lt;/div&gt;
   `,
   })
   export default class DynamicLayerComponent {
   currentComponent = null;
  
   @ViewChild('dynamicComponentContainer', { read: ViewContainerRef })     dynamicComponentContainer: ViewContainerRef;
   @Output() visibility = new EventEmitter&lt;boolean&gt;();
  
  // component: Class for the component you want to create
  // inputs: An object with key/value pairs mapped to input name/input value
  @Input() set componentData(data: {component: any, inputs: any }) {
  console.log('setting');
  if (!data) {
    return;
  }
  
  // Inputs need to be in the following format to be resolved properly
  let inputProviders = Object.keys(data.inputs).map((inputName) =&gt; {return   {provide: inputName, useValue: data.inputs[inputName]};});
  let resolvedInputs = ReflectiveInjector.resolve(inputProviders);
  
  // We create an injector out of the data we want to pass down and this components injector
  let injector = ReflectiveInjector.fromResolvedProviders(resolvedInputs,    this.dynamicComponentContainer.parentInjector);
  
  // We create a factory out of the component we want to create
  let factory = this.resolver.resolveComponentFactory(data.component);
  
  // We create the component using the factory and the injector
  let component = factory.create(injector);
  
  // We insert the component into the dom container
  this.dynamicComponentContainer.insert(component.hostView);
  
  // We can destroy the old component is we like by calling destroy
  if (this.currentComponent) {
    console.log('fdsafa');
    this.currentComponent.destroy();
  }
  
  this.currentComponent = component;
  }
  
   constructor(private resolver: ComponentFactoryResolver) {
    console.log('dfsd');
   }
  }
  </code></pre>
  
  <p>And then I use it like that:</p>
  
  <pre><code>&lt;div *ngFor="let layer of sortedItems" class="single-layer"&gt;
    &lt;div&gt;
      &lt;dynamic-component #DynamicLayer
                         [componentData]="{
    component: layer.componentClass,
    inputs: {
      layerItem: layer,
      sortFilter: sortFilter
    }
  }"
                         (visibility)="setLayerVisibility(layer, $event)"&gt;
      &lt;/dynamic-component&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>The problem is that I am not able to bind to an event, it does not work when binding to (visibility). The setLayerVisibility is not called when the event occurs. How to fix that problem ?</p>
  
  <p>Of course my sample component based on componentClass has the @Output set like:</p>
  
  <pre><code>  @Output() visibility = new EventEmitter&lt;boolean&gt;();
  
  private visibilityChanged() {
      this.visibility.emit(this.layerItem.visible);
    }
  </code></pre>