Thanks, but it seems DynamicComponentLoader methods create new instances. The issue with what i came up with, a preview step, is the same. I already have the components navigated to and filled in with data, i simply need to confirm all the form entries and allow for on-demand changes before form submission. All really needed, is to re-render an existing component using an existing reference.
On Thursday, April 21, 2016 at 7:19:31 AM UTC-5, Günter Zöchbauer wrote: > > I don't really understand your problem but you could route to a component > that shows all your wizard steps in an *ngFor inside a single component > that you actually route to. > > http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468 > > contains an example how to use DynamicComponentLoader with *NgFor > > Could be totally off though... > > On Thursday, April 21, 2016 at 1:16:19 AM UTC+2, hani wrote: >> >> So i have a full routing system in place and working, but i noticed since >> it's based on URL you could only navigate to one view at a time. Since i'm >> writing a wizard, i'll need to review the wizard steps before submission to >> server. The review (potentially a step on its own) should show all the >> steps at the same time. This is an issue since wizard steps are configured >> to be routed and i have no idea how to show them at the same time. >> >> I've tried to create a preview step and imported all the steps that need >> previewing, but that made new instances of each step and hence no data to >> preview. Here is a sample code for a preview step: >> >> import {Component} from 'angular2/core'; >> >> import {Step1} from './step1'; >> import {Step2} from './step2'; >> >> >> @Component({ >> selector: 'preview', >> directives: [Step1, Step2], //Oops! new instances go in here. Not >> helpful >> template: '<div><step1>Loading step1...</step1><step2>Loading >> step2...</step2></div>' >> }) >> export class Preview { >> >> } >> >> And here's a code for the wizard: >> >> >> >> import {Component} from 'angular2/core'; >> import {RouteConfig, Router} from 'angular2/router'; >> >> import {Step1} from './step1'; >> import {Step2} from './step2'; >> import {Preview} from './preview'; >> >> >> >> @RouteConfig([ >> { path: '/step1', name: 'step1', component: Step1, useAsDefault: true >> }, { path: '/step2', name: 'step2', component: Step2 }, >> { path: '/preview', name: 'preview', component: Preview} >> >> ]) >> @Component({ >> selector: 'preview', >> template: '<div><button type="button" >> (click)="navigate()">Navigate</button><button type="button" >> (click)="preview()">Preview</button><router-outlet></router-outlet></div>' >> }) >> export class Wizard { >> constructor(private _router: Router) { } >> >> >> navigate() { >> this._router.navigate(['step2']); >> } >> preview() { >> this._router.navigate(['preview']); >> } >> } >> >> >> I'm not even sure if have a separate step for previewing is the way to go >> in Angular2, so I appreciate any feedback on how Angular2 solves such >> problems. >> > -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at https://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
