I have created a custom directive featuring an @Output EventEmitter:
@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();
}
}
}
Now, I am using it in this manner:
<button (ifValid)="save()">
In my component, the save() function looks like:
private save() {
this.service.push(this.user, this.toCreate)
.pipe(
take(1)
)
.subscribe();
}
I find manual subscription to be bothersome.
I would like to automatically add the operator
switchMap(() => this.service.push(...))ifValid is triggered.
Is it possible to subscribe to ifValid outside of HTML, directly within my component?
I hope this explanation is clear.