Best practices for Ionic Pages that needs to be reused

Ionic Framework ionic-v3
1

During onboarding users, I have a page with form fields named SignUpPage.

Once the user has onboarded and would like to update their personal information at any point later, they would want to go to a page called UpdateInformation.

SignUpPageFirst and UpdateInformation have exact identical html so it makes sense to use a custom component here to reuse the template in both the pages.

However, the only difference between them is the navigation issue:
During onboarding the user goes from :

SignUpPage ----> ValidateSignUpPage

If the user is already signed in, the user can just go home page after updating the information (from the same form that exists in the SignUpPage) in the UpdateInformation page.

If the user is signed in to the app:

UpdateInformationPage ----> HomePage

The only different between the two pages is how the onSubmit() function in the .ts pages use NavCtrl to push users to the next page.

How can I create a component to reuse the same form in both pages, but then customize the onSubmit() function in each page so as to redirect users to different direction based on what page they are on?

2

One way would be to have an @Output() property in the shared component that fires when the submit button is clicked. Each page that includes this component would bind (submit)="onSubmit()" and implement their own onSubmit() differently. Inside the component, when the submit button is clicked, you just call this.submit.emit() and let the host take care of the rest.

3

While not exactly the same as your requirements, I have an app that allows for the adding and editing of entries. When an item is added, the Id that is passed is equal to zero. If the item is saved, the id is used to set the value of a hidden field

When the item is edited, the value of the Id hidden field is used when a call to my WCF service.

Relying upon some flag set should allow you to implement similar functionality.