title: Angular 2 template can't get event binding
body: <p>I try to create my own structure directive that can create some DOM structure (button group in my case). I want to create custom tags for wrapper and child and apply custom classes.</p>
  
  <p>I stuck on moment - Output event. I finished directive. It's working. (I make DOM manipulation inside this directive).
  But now I can't emit event from this directive 9I found answers that it's because events should be static.   like  - <code>(click)="some()")</code>
  But how I can do it if my child's created dynamically? (For now I use <code>AddEventListener</code>).</p>
  
  <p>and have this error: <strong>Event binding onBtnClick not emitted by any directive on an embedded template</strong></p>
  
  <p>Thanks for any information.</p>
  
  <p>Here is my component code:</p>
  
  <pre><code>import {Component, Injectable, Input, Output, EventEmitter, OnInit, ElementRef} from '@angular/core';
  
  import { BtnGroupChildStructure } from './button_group.directive';
  import { Config } from 'appConfig';
  /* ------- !Config  ---------*/
  
  const MODULE_NAME: string = 'button_group';
  const MODULE_PATH: string = `${Config.getProdFolderName()}/shared/components/${MODULE_NAME}`;
  
  @Component({
      selector : 'cgm_button_group',
      template : `&lt;template *btnGroupChildStruct="config" 
                  (onBtnClick)="t_handleBtnClick($event)"&gt;&lt;/template&gt;`,
      host : {'class': 'button-group-box'},
      directives : [
          BtnGroupChildStructure
      ]
  })
  @Injectable()
  export class ButtonGroupComponent implements OnInit {
  
      private _config: Object;
  
      @Input() config(val: Object) {
          console.log(val);
          Object.assign(this._config, val);
          console.log(this._config);
      }
  
      @Output onBtnClick = new EventEmitter&lt;string&gt;();
  
      ngOnInit() {
  
      }
  
      private t_handleBtnClick(buttonName: string): void {
          this.onBtnClick.emit(buttonName);
      }
  }
  </code></pre>
  
  <p>Here is Directive code</p>
  
  <pre><code>import { Directive, Input, 
      ViewContainerRef, ElementRef, TemplateRef, OnInit, Output, EventEmitter } from '@angular/core'
  
  @Directive({ selector : '[btnGroupChildStruct]'})
  export class BtnGroupChildStructure implements OnInit {
  
      private _hostEl;
      private _config: Object = {};
  
      @Input() set btnGroupChildStruct(val: Object) {
          console.log(val);
          Object.assign(this._config, val);
      }
  
      @Output() onBtnClick = new EventEmitter&lt;string&gt;();
  
      constructor(
          private _templateRef: TemplateRef&lt;any&gt;,
          private _viewContainer: ViewContainerRef,
          private _elementRef: ElementRef
      ) {
          this._hostEl = this._elementRef.nativeElement.parentElement;
  
      }
  
      ngOnInit() {
          //console.log(this._templateRef);
          this._generateChilds();
          this._hostEl.appendChild(this._generateGroup());
          //this._viewContainer.createEmbeddedView(this._templateRef);
      }
  
      /**
       * _generateChilds -&gt; generate childs structure
       * @returns {DocumentFragment}
       * @private
       */
      private _generateChilds(): DocumentFragment {
          let fragment = document.createDocumentFragment();
  
          if (this._config.hasOwnProperty('buttonNamesList')) {
              this._config.buttonNamesList.forEach((buttonName) =&gt; {
                  let item = document.createElement(this._config.tagChild);
                  this._addClasses(item, this._config.childClasses);
                  item.textContent = buttonName;
                  this._addClickHandler(item);
                  fragment.appendChild(item);
              })
          } else {
              throw new Error('Button group Directive. _generateChilds. Can"t get _config buttonNamesList prop');
          }
  
          return fragment;
  
      }
  
      /**
       * _generateGroup -&gt; generate button group
       * @returns {HTMLElement}
       * @private
       */
      private _generateGroup(): HTMLElement {
          let wrapperTag;
          if (this._config.hasOwnProperty('tagWrapper')) {
              wrapperTag = document.createElement(this._config.tagWrapper);
              this._addClasses(wrapperTag, this._config.wrapperClasses);
              wrapperTag.appendChild(this._generateChilds());
          } else {
              throw new Error('Button group Directive. _generateGroup. Can"t get _config tagWrapper prop');
          }
  
          return wrapperTag;
      }
  
      /**
       * _addClasses -&gt; Add classes to el
       * @param el (HTMLElement) -&gt; handled Element
       * @param classesStr (String) -&gt; string of classes
       * @private
       */
      private _addClasses(el: HTMLElement, classesStr: string): void {
          if (!el || !classesStr) throw new Error('_addClasses. Missed one of parameter');
          el.className = classesStr
      }
  
      private _addClickHandler(el: HTMLElement): void {
          if (!el) throw new Error('_addClickHandler. Non exist element');
          el.addEventListener('click', (el) =&gt; {
              this.onBtnClick.emit(el.textContent);
          })
      }
  
  }
  </code></pre>