title: EventEmitter from bootstrap modal component to parent
body: <p>I am using ng-bootstrap with Angular 4, specific use case is the modal with &quot;Component as content&quot; (second scenario from <a href="https://ng-bootstrap.github.io/#/components/modal/examples" rel="nofollow noreferrer">https://ng-bootstrap.github.io/#/components/modal/examples</a>).</p>
  <p>I would like to emit some data from the child to the parent. For this I have created a non-working plunk from the example:</p>
  <p>modal.component.ts</p>
  <pre class="lang-js prettyprint-override"><code>import {Component, Input, Output, EventEmitter} from '@angular/core';    
  import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
  
  @Component({
    selector: 'ngbd-modal-content',
    template: `
      &lt;div class=&quot;modal-header&quot;&gt;
        &lt;h4 class=&quot;modal-title&quot;&gt;Hi there!&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class=&quot;modal-body&quot;&gt;
        &lt;p&gt;Hello!&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class=&quot;modal-footer&quot;&gt;
        &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; (click)=&quot;testclick('teststring')&quot;&gt;Testclick&lt;/button&gt;
      &lt;/div&gt;
    `
  })
  export class NgbdModalContent {
    @Output() clickevent = new EventEmitter&lt;string&gt;();
  
    constructor(public activeModal: NgbActiveModal) {}
    
    testclick(teststring: string) {
      this.clickevent.emit(teststring);
    }
  }
  
  @Component({
    selector: 'ngbd-modal-component',
    templateUrl: 'src/modal-component.html'
  })
  export class NgbdModalComponent {
    constructor(private modalService: NgbModal) {}
  
    open() {
      const modalRef = this.modalService.open(NgbdModalContent);
    }
  }
  </code></pre>
  <p>modal.component.html</p>
  <pre class="lang-html prettyprint-override"><code>&lt;button class=&quot;btn btn-lg btn-outline-primary&quot; (click)=&quot;open()&quot;&gt;Launch demo modal&lt;/button&gt;
  </code></pre>
  <p>As you can see, I have only added the EventEmitter into the NgbdModalContent Component. What I would like is the NgbdModalComponent to receive the <code>testclick</code> event and log it to the console. Where can I put it in the code above?</p>
  <p>I am aware there is a very similar question here <a href="https://stackoverflow.com/questions/42681556/event-emitter-from-bootstrap-modal-to-parent">Event emitter from bootstrap modal to parent</a> but I think it is still a very different implementation scenario since I am opening the modal directly as component here.</p>
  <p>Obviously I would prefer some simple solutions where I do not have to go into the code for <code>modalService</code> itself...</p>