Angular 2 how to bubble up an event from a nested component

Question

I have:

<modal
  #forgotPasswordModal
  [viewModel]="forgotPasswordModalVm"
  (cancelled)="onForgotPasswordModalCancelled($event)"
  (saved)="onForgotPasswordModalSaved($event)">
  <forgot-password></forgot-password>
</modal>

Once the forgot password form is complete, I need it to close the modal by calling close() on the parent modal component above. I can fire an event with the EventEmitter, but how can I receive it on the parent container? I don't want any forgot-password specific log inside the modal component, nor do I want to use a generic event service.

Answer 1

<modal
  #forgotPasswordModal
  [viewModel]="forgotPasswordModalVm"
  (cancelled)="onForgotPasswordModalCancelled($event)"
  (saved)="onForgotPasswordModalSaved($event)">
  <forgot-password (close)="onModalClose()"></forgot-password>
</modal>

export class ForgotPasswordComponent {
  @Output() close:EventEmitter = new EventEmitter();

  // execute when the modal should be closed
  onComplete() {
    this.close.emit(null);
  }
}