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';
  }
}

Check this [**answer**](http://stackoverflow.com/questions/42460418/angular-2-ng2-bootstrap-modal-inside-child-component-called-from-parent-componen/42463516#42463516) — Aravind, Mar 10 '17 at 04:42

Hiren Gondhiya · Accepted Answer · 2017-03-10T05:44:29.553

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

I see where you're going, but what I'm having trouble with is bubbling the up to getNotification() in the modal's parent. A simple example might be if the parent had a form and the dialogue was a Clear-Form yes or no. It seemed like a simple thing to do a few hours ago.. — Neph, Mar 09 '17 at 01:44
@Neph I think it is easy enough but you just need to try a little more. Please check my updated answer which gives result in both Modal Compnent and parent of Modal Component. — Hiren Gondhiya, Mar 10 '17 at 05:35

score 11 · Answer 2 · edited Jun 11 '21 at 14:08

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';
  modalRef.content.notifyParent.subscribe((result)=>{
       console.log(result);   
  })
}

score 0 · Answer 3 · answered Mar 08 '17 at 22:22

This is how your app.ts should be:

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

score -1 · Answer 4 · edited Feb 22 '19 at 09:10

-1

I'm on Angular 7 and the way I got to handle and event from child within the parent is just as @Veshraj Joshi did it. As follows:

`modalRef.componentInstance.notifyParent.subscribe(result => {
  console.log(result);
});`

edited Feb 22 '19 at 09:10

Eric Aya

69,473
35
181
253

answered Feb 22 '19 at 08:59

Thendokhae Makahane

697
7
9

Event emitter from bootstrap modal to parent

4 Answers4

Linked