Event emitter from bootstrap modal to parent

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


In angular 7 accepted answer is not working .. so I found new solution to it. It's similar to but little bit change there.

Nothing should be changed in child component's typescript file. You need to do regular code for @output and emit function. But you need some changes in parent type script file. Code below is working for me to collect event and data ..

open() {
  const modalRef = this.modalService.open(NgbdModalContent);
  // componentInstace didnot work here for me
  // modalRef.componentInstance.name = 'World';
  modelRef.content.notifyParent.subscribe((result)=>{
       console.log(result);   
  })
}