title: Add event handler to dynamically loaded component
body: <p>I have two components: <code>workflow</code> and <code>block</code>. The <code>block</code> components are loaded dynamically into <code>workflow</code> using a <code>directive</code> and the <code>ComponentFactory</code>.</p>
  
  <p>The <code>block</code> component contains a button and I want to emit an event to the parent (<code>workflow</code>) when the button was clicked, therefore I added <code>@Output('onDelete') onDelete = new EventEmitter&lt;boolean&gt;()</code> in <code>BlockComponent</code> in order to be able to emit the event.</p>
  
  <p>The problem which I encounter is adding the <code>event handler</code> on the <code>&lt;app-block&gt;</code>.
  I tried to add it using <code>document.getElementsByTagName('app-block').addEventListener('(onDelete)', 'blockDeleted()')</code>  but it's not working.</p>
  
  <p><strong>workflow.component.html</strong></p>
  
  <pre><code>&lt;div clas="mainContent"&gt;
    &lt;ng-template appWorkflowDirective&gt;&lt;/ng-template&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>workflow.component.ts</strong></p>
  
  <pre><code>private createNewBlockComponent(event, object): void {
     const componentFactory = this.componentFactoryResolver.resolveComponentFactory(BlockComponent);
     const componentRef = this.workflowsDirective.viewContainerRef.createComponent(componentFactory);
  
     (&lt;BlockComponent&gt;componentRef.instance).position = new BlockPosition(event.layerX, event.layerY) ;
  }
  </code></pre>
  
  <p>I'm looking for the same behavior as in this <a href="https://angular.io/guide/component-interaction#parent-listens-for-child-event" rel="nofollow noreferrer">example</a> from angular</p>