Component Output with Promise

Question

I have a button component which has an Event Emitter, and when it is triggered I want to start a loading animation in the button, and when the promise is resolved, stop the loading animation.

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

This would be used something like:

<my-button (promiseClick)="makeAPICall()"></my-button>

Where the makeAPICall() method returns a Promise.

I need the my-button component to know when the makeAPICall() promise has been resolved. How can this be achieved?

Answer 1

<my-button #button (promiseClick)="button.makeKnown(makeAPICall())"></my-button>

makeKnown(p:Promise) {
  p.then(result => this.result = result);
}