1

I'm setting up a user registration workflow based on angular and aws-amplify. After i signed the new user up a confirmation step is needed and i want to redirect the user to a confirmation component where he needs to enter a confirmation code.

Here is my signUp method to create a new user:

  signUp() {
    if (this.signUpForm.valid === true) {
      this.auth
        .signUp(this.signUpForm.get('email').value, this.signUpForm.get('password').value)
        .then(data => console.log(data))
        .catch(err => console.log(err));
    }
  }

Instead of simply logging the data i want to route to the confirmation page. So the final result should be something like this:

  signUp() {
    if (this.signUpForm.valid === true) {
      this.auth
        .signUp(this.signUpForm.get('email').value, this.signUpForm.get('password').value)
        .then(data => this.router.navigate(['auth/confirm']))
        .catch(err => console.log(err));
    }
  }

In order to process the registration confirmation i need access to some content of the data that represents the newly created user.

How can i make the data object accessible in my target component?

I found a solution like https://github.com/mlabieniec/AngularMaterialPWA/blob/master/partTwo/src/app/auth/confirm-code/confirm-code.component.ts

But i do not like the approach to use the angular-environment for this.

Christian Bonzelet
  • 64
  • 1
  • 8

2 Answers2

1

This is a really nice article on a few different ways to pass data in different scenarios. The new method as mentioned by Chiffie is not included and this is a perfectly viable approach as well. https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/. The sharing data using a service is how i would tackle this personally.

Sam
  • 1,736
  • 8
  • 15
0

https://stackoverflow.com/a/36835156/10179262 hope this answer helps in sharing data to another component through route.

Sridhar Natuva
  • 211
  • 1
  • 4
  • 16