Angular 2 make a second emit, when first completes - angularjs

Question

We've started migrating from ng1 to ng2, but I don't understand how to upgrade my button component. For example:
In angular 1, I can pass a promise inside of a component and wait response, like:
class ButtonController {
click: () => Promise<any>;
form: SomeForm;
onClick(): void {
this.click().then(() => {
this.form.doSomething();
});
}
}
export const ButtonComponent = {
templateUrl: 'button-component.template.html',
controller: ButtonController,
controllerAs: 'vm',
require: '^form',
bindings: {
click: '&'
}
});
But, how can I achive this in angular 2 with #Output and EventEmitter? I've achived this with #Input, callback from component and a service between ButtonComponent and FormComponent, but I'm sure it's totally wrong. Will be glad of any help. Thanks.
angular 2 code:
sign-up.template.html
// content
<ab-form [uFormGroup]="signUpForm">
//content
<ab-button [uClick]="onClick"></ab-button>
</ab-form>
sign-up.component.ts
export class SignUpComponent {
onClick = () => {
//do something async
}
}
form.component.ts
#Component({
selector: "ab-form",
template: require("./form.template.html"),
providers: [
FormService
]
})
export class FormComponent {
#Input() uFormGroup: FormGroup;
constructor(
private formService: FormService
) {
this.formService.buttonClicked$.subscribe((fn) => {
this.uFormGroup['submitted'] = true;
if (this.uFormGroup.invlaid) {
return this.formService.endSubmittingForm();
}
this.formService.startSubmittingForm();
// resolve if function is not a promise
Promise.resolve(fn()).then(() => {
this.formService.endSubmittingForm();
});
});
}
}
button.component.ts
export class ButtonComponent {
submitting = false;
constructor(
private formService: FormService
) {
this.formService.formSubmitting$.subscribe(() => {
this.submitting = true;
});
this.formService.formSubmitted$.subscribe(() => {
this.submitting = false;
});
}
onClick(): void {
this.formService.buttonClick(this.uClick);
}
}
form.service.ts
export class FormService {
private buttonClickedSource = new Subject<Function>();
private formSubmittingSource = new Subject<void>();
private formSubmitedSource = new Subject<void>();
buttonClicked$ = this.buttonClickedSource.asObservable();
formSubmitting$ = this.formSubmittingSource.asObservable();
formSubmited$ = this.formSubmitedSource.asObservable();
buttonClick(fn: Function): void {
this.buttonClickedSource.next(fn);
}
startSubmittingForm(): void {
this.formSubmittingSource.next();
}
endSubmittingForm(): void {
this.formSubmitedSource.next();
}
}

Answer 1

You can create simple Component Inputs and Outputs like this:
#Component({
selector: 'myButton',
template: '<button (click)="buttonAction()">{{label}}</button>',
inputs: ['label']
})
export class MyButton {
#Input()
label:string;
#Output()
myButtonClick = new EventEmitter<any>();
...
buttonAction() {
this.tableButtonClick.emit("some value")
}
}
and then use it in your templates like this:
<myButton [label]="sample"
(myButtonClick)="handleMyButtonClick($event)">
</myButton>
$event will be string "some value", but you can use any object you like

Answer 2

You can do the same as you done with Angular 1, using Observer :
onClick(): void {
this.formService.buttonClick().subscribe(() => {
// You reach this when buttonClick is async terminated
// like your then() in your Angular 1 code
this.uClick()
...
});
}
And in your FormService you return the Observable :
buttonClick(): Observable<any> {
return this.buttonClicked$;
}