Event emitter from bootstrap modal to parent

Question

I want to pass a modal event from the modal component to the modal's parent component, but for some reason I can't seem to get the EventEmitter to work. If anyone has an idea it would be greatly appreciated. The main code is below, a (non-working) plunk forked from the ng-bootstrap demo is here: http://plnkr.co/edit/xZhsqBV2mQaPxqFkoE7C?p=preview

app.ts

@Component({
  selector: 'my-app',
  template: `
    <div class="container-fluid" (notifyParent)="getNotification($event)">
    <template ngbModalContainer></template>
    <ngbd-modal-component ></ngbd-modal-component>
  </div>
  `
})
export class App {
      getNotification(evt) {
        console.log('Message received...');
    }
}

modal-component.ts

import {Component, Input, Output, EventEmitter} from '@angular/core';

import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-modal-content',
  template: `
    <div class="modal-body">
      <p>Hello, {{name}}!</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" (click)="activeModal.close('Close click')">Close</button>
      <button type="button" class="btn btn-secondary" (click)="notify()">Notify</button>
    </div>
  `
})
export class NgbdModalContent {
  @Input() name;
  @Output() notifyParent: EventEmitter<any> = new EventEmitter();
  constructor(public activeModal: NgbActiveModal) {}

      notify(){
        console.log('Notify clicked...');
        this.notifyParent.emit('Here is an Emit from the Child...');
    }
}

@Component({
  selector: 'ngbd-modal-component',
  templateUrl: 'src/modal-component.html'
})
export class NgbdModalComponent {
  constructor(private modalService: NgbModal) {}

  open() {
    const modalRef = this.modalService.open(NgbdModalContent);
    modalRef.componentInstance.name = 'World';
  }
}

Answer 1

Updated answer:

Finally I found solution to your issue. I am not sure if you have carefully studied all the examples given for modal component on ng-bootstrap web site.

You need to return result using activeModal.close() method from the content component. That value will be picked up in Modal Component and then you can do whatever you want to do with it. I have created a working Plunker which is basically fork of the official plunk and it works like charm.

Old answer:

I think you have put event handling code at wrong place and that's why you don't get event notification.

Below is the working template on app.ts

  template: `
  <div class="container-fluid">
    <template ngbModalContainer></template>
    <ngbd-modal-component (notifyParent)="getNotification($event)"></ngbd-modal-component>
  </div>
  `

Also modified code of Notify function in modal-component.ts to

  notify(){
    console.log('Notify clicked...');
    this.notifyParent.emit('Here is an Emit from the Child...');
    this.activeModal.close('Notify click');
}

I have forked and modified your plunk to make it working here