title: Capturing events emitted from components inside <ng-content>?
body: <p>I have a custom modal component which uses <code>&lt;ng-content&gt;</code> to transclude content:</p>
  
  <pre><code>@Component({
    selector: 'modal-container',
    template: `
      &lt;div [class]="css"&gt;
        &lt;div [attr.id]="id" class="reveal" (open)="openModal()"&gt;
          &lt;ng-content&gt;&lt;/ng-content&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    `
  })
  export class ModalContainerComponent {
      . . .
  }
  </code></pre>
  
  <p>In the contents of <code>&lt;ng-content&gt;</code> I have a component which emits the <code>open</code> event:</p>
  
  <pre><code>@Component({
    selector: 'login-modal',
    template: `
      &lt;modal-container [id]="'login-modal'"&gt;
        &lt;section&gt;...&lt;/section&gt;
      &lt;/modal-container&gt;
    `,
  })
  export class LoginModalComponent implements OnInit {
  
      @Output()
      open = new EventEmitter();
  
      ngOnInit(): void {
          // Here I am checking an ngrx store with code that is not included
          if (state.openLoginModal) {
            this.open.emit();
          }
      }
  
  }
  </code></pre>
  
  <p>however, the <code>ModalContainerComponent</code> never receives the event.</p>
  
  <p>Examples such as:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/36805497/how-to-observe-input-element-changes-in-ng-content">How to observe input element changes in ng-content</a></li>
  <li><a href="https://stackoverflow.com/questions/35574220/angular-2-capture-events-from-ng-content">Angular 2: capture events from ng-content</a></li>
  </ul>
  
  <p>are coming up short. What am I doing wrong?</p>
  
  <hr>
  
  <h2><strong>Update:</strong></h2>
  
  <p>Since <code>@Output</code> events don't bubble, I decided to go with a custom directive to emit the event:</p>
  
  <pre><code>import { Directive, ElementRef, Renderer } from '@angular/core';
  
  
  @Directive({
    selector: '[open-modal]',
    host: { '(click)': 'openModal()' }
  })
  export class OpenModalDirective {
  
    constructor(
      private elementRef: ElementRef,
      private renderer: Renderer
    ) {}
  
    openModal(): void {
      this.renderer.invokeElementMethod(this.elementRef.nativeElement,
        'dispatchEvent',
        [new CustomEvent('open-modal-container', { bubbles: true })]);
    }
  
  }
  </code></pre>
  
  <p>using: <a href="https://stackoverflow.com/questions/36342890/in-angular2-how-to-know-when-any-form-input-field-lost-focus/36348311#36348311">in Angular2 how to know when ANY form input field lost focus</a> as an example.</p>
  
  <p>However, I still can't pick up the custom event in <code>ModalContainerComponent</code>:</p>
  
  <pre><code>@HostListener('open-modal-container')
  openModalContainer(): void {
    console.log('openModal() was invoked');
  }
  </code></pre>
  
  <p>I can log the click event, so that's happening, but the host listener is failing. Thoughts?</p>
  
  <hr>
  
  <h2>Update 2</h2>
  
  <p>I'm abandoning this approach in favor of a shared service, but I'm running into an issue with <code>.next()</code> not providing a value to the subscriber: <a href="https://stackoverflow.com/questions/41865348/subscriber-doesnt-receive-value-from-next">Subscriber doesn&#39;t receive value from .next()</a></p>