Angular 2+ Routing -- Routing based on user input

Question

Currently in our project, we are using Angular's Router to define our routes. We have a wizard-esque single page app that has next and previous buttons on each page that define which route to go to next and previous respectively. These next and previous buttons are implemented with conditional logic on each page based on user input from previous pages (e.g. if user selected "Option1 and Selection1" from a previous page, go to Page X, else go to Page Y). This works most of the time; however, as we add more pages that require more conditional logic, this could potentially get out of hand.

Is there a way to simplify this process? I've researched Angular Router guards, and while they provide a way to redirect a user to a certain page if the application doesn't have the necessary data at the time a route is called, I don't think they are what we are looking for.

How about RegularExpressions? stackoverflow.com/questions/18131834/… — salah-1
– salah-1, Commented Feb 20, 2018 at 18:43
Sounds like the problem isn’t pager, conditional or router but the design itself. — salah-1
– salah-1, Commented Feb 20, 2018 at 18:44
Sorry, I added a bit of a clarification above -- I want to go to a certain page based on answers from a previous page. — user8539602
– user8539602, Commented Feb 20, 2018 at 19:37

funkizer · Accepted Answer · 2018-02-20 18:55:16Z

0

If the user isn't meant to to access page 2+ of your wizard directly, there's no reason to use Router imo. I'd go for one main component/route, a custom tree data structure that defines the user flow in it like models, components, dynamic forms, editors, api endpoints, etc used in each step. If there's too many cases for simple ng-switches, toss in ComponentFactories: https://angular.io/guide/dynamic-component-loader

Ie. I try to avoid having like Step1Component etc., and have reusable components that allow different kind of UIs built from basically just json. Though in a smaller case step1, step2, etc. -components are fine too.

answered Feb 20, 2018 at 18:55

funkizer

4,9271 gold badge21 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user8539602 Over a year ago

Is this kind of what you're talking about? stackoverflow.com/questions/37746516/… Edit: Or this? angular2-tree.readme.io/docs

funkizer Over a year ago

Not a dom tree, i mean just a json array of steps, their data models (which may include metadata on which kind of editors/form elements they need), possible sub-steps (hence a tree) etc..

Collectives™ on Stack Overflow

Angular 2+ Routing -- Routing based on user input

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related