Angular2 custom button component (EventEmitter)

[N Dzhil]

Hello, I'm trying to implement a custom button component with Angular 2(rc-6) which has 2 important features:

- prevent a second click(the user clicks the button twice)

- show a spinning icon until the associated action is complete

So, after reading some of the Angular 2 docs I saw that I can use the EventEmitter like this:

-- usage of the button component

<my-button (btnClick)="func()"></my-button>

and in my button component have the following

--button component 

  @Output()
  btnClick: EventEmitter<any> = new EventEmitter<any>();

  clickHandler($event) {
    $event.preventDefault();
    this.btnClick.emit($event);
  }

--button component template

<a (click)="clickHandler($event)">

Everything looks good, but the emit method only fires an event and does not know whether func has finished its execution.

Is there a way to call a function on a parent component from a child component and get the result from that invocation?

Something like:

  @Output()
  btnClick: EventEmitter<any> = new EventEmitter<any>();

  clickHandler($event) {
    $event.preventDefault();
    let result = this.btnClick.emit($event);
    //check if the result is an observable and wait for it to be resolved
  }

I know I can pass a function to the emit method, and then in the parent component to call that function whenever I decide in  func, so I can know when the execution has stopped and stop spinning and allow a second click.

But I don't want that decision to be taken by the parent component.

Thank you very much!