https://github.com/maiyaporn/angular2-wizard
https://maiyaporn.github.io/angular2-wizard-demo/ (DEMO)
So I'm using this simple wizard for my application and I'm trying to figure out how I can navigate back and forth (either using the browser's back and forward buttons or click on the mouse to go back or forwards).
If you go through the demo provided, when you reach step 2 but want to go back, it seems like the only way to actually go back to step 1 is to click the "previous" button.
I want to be able to actually click "back" (in my case, with my mouse) so I can go back to step 1; clicking "back" with my mouse ends up taking me back to a previous page instead.
I've tried messing with history.pushState() but it still does not go back to step 1 like I want.
This is a little confusing and new to me as I am getting my feet wet with angular2. Since this is a parent-with-many-child-components on one page, it doesn't look like I can use hashes (I could be wrong).
Just would like to get some help on what I could take a look at to point me in the right direction.
Thanks in advance.
Believe I figured out the answer to my question.
It may just be a hack and probably not a proper answer but it's working like I want it for now.
I basically went into the wizard-component.ts file and gave each step a hash. I then used onpopstate to listen for the history and used the goToStep method to find the correct step (by the hash).
You are going to want to use Routing.
Follow the tutorial: https://angular.io/docs/ts/latest/tutorial/toh-pt5.html
In brief
<base href="/"> to index.htmlimport { RouterModule } from '@angular/router';RouterModule.forRoot([{ path: 'heroes', component: HeroesComponent }])<router-outlet></router-outlet><a routerLink="/heroes">Heroes</a>