Angular: @Output EventEmitter subscription

I've coded a directive with an @Output EventEmitter property:

@Directive({
selector: '[ifValid]'
})
export class SubmitValidationDirective {

@Output('ifValid') valid = new EventEmitter<void>();

constructor(
private formRef: NgForm
) {}

@HostListener('click')
handleClick() {
this.emitIfValid();
}

private emitIfValid() {
if (this.formRef.valid) {
this.valid.emit();
}
}

}


So, I'm using this like:

<button (ifValid)="save()">


So then, into my component:

private save() {
this.service.push(this.user, this.toCreate)
.pipe(
take(1)
)
.subscribe();
}


Manual subscription is noising me.

I want that when ifValid raises, add this operator-like switchMap(() => this.service.push(...)).

I would like to know if it's possible to subscribe to ifValid out of html. I mean, Could I subscribe to ifValid inside of my component?

I hope I've explained so well.

Continue reading...