CODEWITHSUNDEEP
angularwizardvmware-clarity
Ofra Yechiel
Ofra Yechiel

Reputation: 40

Angular Clarity Wizard: Adding and navigating to new page with one click

I'm using Clarity Design System to build my angular app, and I want to make a somewhat complex wizard.

In my use case, the user starts a wizard with two pages. On the first page she is asked a question. Depending on the answer, one of two new wizard pages will be inserted between the two pages. i.e.:

1 Question Page (Yes or No?)
2 Finish

will become

1 Question Page
2 New Page for Yes
3 Finish

or

1 Question Page
2 New Page for No
3 Finish

based on the user's answer.

The difference between what I'm trying to build and the Skipping and Unskipping Steps example, is that I'd like to have two custom buttons on the first page, Yes & No, so that the user doesn't have to click an extra button (the "Next" button of page one).

I am, however, using the <clr-wizard-page *ngIf="!skipStepTwo"> approach that was used in the example in order to hide/show the dynamic pages. Problem is, it seems that every event I try to handle in order to navigate to the dynamic page 2 happens BEFORE this new page is added to the pagesCollection. I end up with the new page appearing, but the wizard has moved on the the last page (Page 3 Finish).

Is there any way around it? Can I create a new page and move to it with one user click?

Upvotes: 0

Views: 2115

Answers (1)

Jeremy Wilken
Jeremy Wilken

Reputation: 6976

Without your exact code, I have to guess a bit about what you might be doing, but with your custom buttons you'd need to set the flag and then change the wizard page. Here is a potential solution. https://stackblitz.com/edit/clarity-wizard-skipping-custom-buttons

The issue here is that toggling the state of a wizard page and navigating in the same change detection cycle doesn't commit the new page in time for it to navigate to it, thus skipping to the next page. We have a known bug related to this. So the workaround is to use a setTimeout to delay the navigation to the next cycle so the new page has resolved and becomes the correct page.

Upvotes: 2

Related Questions