When subscribing to a service method, I have a sequence of actions that need to occur: displaying a toaster, resetting a form, and navigating to another component. However, I want to introduce a delay before the navigation so users can see the toaster message indicating the upcoming page change.
this.auth.signup(body).subscribe({
next: () => {
this.toastr.success("Redirecting you to login.", 'Register successful!');
this.signUpForm.reset();
// Need to implement a delay before navigating
this.router.navigate(['login']);
},
error: (err) => { this.toastr.error(err?.error.message, 'Oops!'); }
});
I've attempted various techniques found online, such as using 'rxjs/operators' for delays or implementing promises with pipes, but none have proven effective in achieving the desired result thus far.