How to use Nested routing with angular-archwizard to load separate component for every step independently

[AbhijitMuke]

Hi,

I am quite new to angular-archwizard, trying to implement it in one of the my workflow wizard.

Bellow is my under development architecture,

• center component
  • having angular-archwizard with 3 different steps - .HTML file
  • having control of moving one step to another step - .TS file
  • For every steps I have router-outlet to load child component through routing

I supposed to navigate by URL for every step to different route by router-outlet.

Notes

• Application already having main router outlet(app.component.html), where I load parent components.

• Center component is one of the parent component having children routing component for every step

Questions

1. Is there any way to achieve above architecture with angular-archwizard
2. How to load first route while loading center component ?
3. Currently, I'm using navigate method on stepEnter() trigger, which is not loading newly routed component.

Basically, I am trying to use Nested routing with angular-archwizard to load separate component for every step independently.

Thanks in advance.

[madoar]

angular-archwizard doesn't support step selection using angular routes out of the box.
You will need to write some glue around it to make the step selection work using an angular router.

In a nutshell you will need to perform to execute some additional initialization code when using a router-outlet. Whenever an angular-archwizard component is shown it is initializes with at a initialization step given to the wizard component. To be able to navigate the wizard in forward direction you need to ensure that all previous steps to the current step, i.e. also the initialization step, have been completed. To fulfill these requirements you can use the API of the wizard component to navigate the wizard to the correct step as indicated by the router-outlet.

Using the current release version of angular-archwizard (version 4.0.0) you need to access the internal API of the wizard component to perform navigation from the outside. This can be done by calling the methods located in:

@ViewChild(WizardComponent)
public wizard: WizardComponent;

...
wizard.navigation.<navigation-methods>(...);

In the next release version (most likely version 5.0.0) the navigation methods will be exposed in a more stable API directly inside the WizardComponent. Sadly the release is currently blocked by #213.
After #213 has been fixed the new version will be released! Before fixing #213 I want to first wait until @earshinov is back to find a long-term solution to the problem, therefore I expect this to take at least 2 more weeks.

[madoar]

I have just released version 5.0.0! Feel free to give it a try!

If you have any questions or issues feel free to open a new issue