How to make this component?

Question

Angular

Created a component for authorization in the system. In it, after submitting the form and receiving a token, a redirect occurs.

submitForm() {
    this.blockButton = true;
    this.authService.signIn(this.signInForm.getRawValue()).subscribe(
        data => {
          this.authService.setAuthorizationToken(data);
          this.authService.updateCurrentMemberData();
        },
        error => {
          this.blockButton = false;
        },
        () => {
          this.router.navigate([this.authService.redirectUrl]);
        }
    );
  }

I needed this form on another page (checkout wizard) - I inserted it there, but that's bad luck: I don't need this redirect there. How to create this authorization component correctly so that it can be reused? Where and how to make a redirect?

Answer 1

As an option, make a stub component,
1. on the button, log in output auth, which emits a click event, process everything where this component is used in the parent as needed
2. You can complicate the output :
When you click on the button, make a request to the service

submitSubject = BehaviorSubject(null)
@Output() auth = this.submitSubject.pipe(switchMap( _ => this.auth.signin(this.form.value))

In the template, it's easy to emit on submitSubject.
Ps sorry for the pseudo code, I'm writing from my phone