title: Angular Clarity Wizard: Adding and navigating to new page with one click
body: <p>I'm using Clarity Design System to build my angular app, and I want to make a somewhat complex wizard. </p>
  
  <p>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.: </p>
  
  <p>1 Question Page (Yes or No?)<br>
  2 Finish</p>
  
  <p>will become </p>
  
  <p>1 Question Page<br>
  2 New Page for Yes<br>
  3 Finish</p>
  
  <p>or </p>
  
  <p>1 Question Page<br>
  2 New Page for No<br>
  3 Finish</p>
  
  <p>based on the user's answer. </p>
  
  <p>The difference between what I'm trying to build and the <a href="https://vmware.github.io/clarity/documentation/wizards#examples" rel="nofollow noreferrer">Skipping and Unskipping Steps</a> example, is that I'd like to have two custom buttons on the first page, Yes &amp; No, so that the user doesn't have to click an extra button (the "Next" button of page one).</p>
  
  <p>I am, however, using the <code>&lt;clr-wizard-page *ngIf="!skipStepTwo"&gt;</code> 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). </p>
  
  <p>Is there any way around it? Can I create a new page and move to it with one user click? </p>