EventEmitter from bootstrap modal component to parent

Question

I am using ng-bootstrap with Angular 4, specific use case is the modal with "Component as content" (second scenario from https://ng-bootstrap.github.io/#/components/modal/examples).

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:

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-header">       <h4 class="modal-title">Hi there!</h4>     </div>     <div class="modal-body">       <p>Hello!</p>     </div>     <div class="modal-footer">       <button type="button" class="btn btn-secondary" (click)="testclick('teststring')">Testclick</button>     </div>   ` }) export class NgbdModalContent {   @Output() clickevent = new EventEmitter<string>();    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);   } } 

modal.component.html

<button class="btn btn-lg btn-outline-primary" (click)="open()">Launch demo modal</button> 

As you can see, I have only added the EventEmitter into the NgbdModalContent Component. What I would like is the NgbdModalComponent to receive the testclick event and log it to the console. Where can I put it in the code above?

I am aware there is a very similar question here Event emitter from bootstrap modal to parent but I think it is still a very different implementation scenario since I am opening the modal directly as component here.

Obviously I would prefer some simple solutions where I do not have to go into the code for modalService itself...

Answer 1

It is actually very simple as you can directly subscribe to the @Output events of the component opened as modal's content:

export class NgbdModalComponent {   constructor(private modalService: NgbModal) {}    open() {     const modalRef = this.modalService.open(NgbdModalContent);     modalRef.componentInstance.name = 'World';     modalRef.componentInstance.clickevent.subscribe(($e) => {       console.log($e);     })   } } 

Here is a working plunker: http://plnkr.co/edit/rMJ7qfSSLK0oHspIJbDB?p=preview

Side note: I'm not sure what is your exact use case but the answer to Event emitter from bootstrap modal to parent shows preferred method of communication between modal opener and a component used as a modal's content.