Q:

Emit event to parent component from modal in ng-bootstrap

I've read up a bunch on how to do this but nothing seems to work. I have a modal component that is called from a parent component using ng-bootstrap. The parent successfully passes a parameter to the modal. However I then want to alert the parent when the modal is closed and tell the parent whether data displayed in the modal form was modified or not.
Here are the relevant code fragments. I've left out the templates for simplicity's sake since all they do is call relevant methods in the component code. Am I missing something simple? Thanks in advance.
Modal component:
export class myModalComponent implements OnInit {

  @Input() myRecordId: number;
  @Output() closeEvent = new EventEmitter<boolean>();

  isDirty: boolean = false;

  // this is called from a button click in the template
  close() {
    this.closeEvent.emit(this.isDirty);
    this.activeModal.close();
  }

}

Parent component:
export class myParentComponent implements OnInit {

  // this is called from a button click in the template
  openModal(myRecordId: number) {
    const modalref = this.modal.open(myModalComponent);
    modalref.componentInstance.myRecordId = myRecordId;
    modalref.componentInstance.closeEvent.subscribe(($e) => {
      // when modal is closed I would expect the event to be logged
      // here but I see nothing in the console. :(
      console.log($e);
    })
  }

}

A:

I would suggest another approach instead of subscribe by creating the instance of the component class
Create a new service for reusing the closeEvent across multiple components 
import {EventEmitter} from 'angular2/core';
export class ModalPopupService {
  closeEvent: EventEmitter<any> = new EventEmitter();
  constructor() {}
  emit(data) {
    this.closeEvent.emit(data);
  }
  getCloseEvent() {
    return this.closeEvent;
  }
}

Inject the modalPopupService in your Component and emit the data
export class myModalComponent implements OnInit {

  @Input() myRecordId: number;
  constructor(private modalPopupService :ModalPopupService ){}
  isDirty: boolean = false;

  // this is called from a button click in the template
  close() {
    this.modalPopupService.emit(this.isDirty);
    this.activeModal.close();
  }

}

Now you can subscribe like this
export class myParentComponent implements OnInit {
  constructor(private modalPopupService :ModalPopupService ){}

  // this is called from a button click in the template
  openModal(myRecordId: number) {
    const modalref = this.modal.open(myModalComponent);
    modalref.componentInstance.myRecordId = myRecordId;
    this.modalPopupService.getCloseEvent().subscribe(($e) => {
      // when modal is closed I would expect the event to be logged
      // here but I see nothing in the console. :(
      console.log($e);
    })
  }

}

