angular2, how to show the same component more than once

I have a wizard component with multiple step components, these steps are routed to by the wizard component and the wizard itself is routed to from the root component. As the last step of the wizard, i need to show all the navigated steps at once for reviewing purposes with all the data that’s entered while navigating them. How could i achieve this?

what I’ve tried:

  1. Added @Injectable() to each step component and used Angular2 injection provider, but no matter what I’ve tried, it always instantiates a new instance and all the data entries are gone.

  2. Passing hard-coded references around. Not only terrible and bad practice, thankfully it didn’t work since you can’t access prototype properties outside the component domain.

All fresh out of options. Anything is welcomed!

2
Leave a Reply

avatar
2 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

Maintain your data in a service and bind the view to the service instead of the component class, then each component will show the same data.

@Injectable()
class SharedData {
  name:string;
}

@Component({
  selector: 'wiz-step1',
  template`
<input type="text" [(ngModel)]="sharedData.name">
`})
export class WizStep1 {
  constructor(private sharedData:SharedData) {}
}

@Component({
  selector: 'my-app',
  directives: [WizStep1],
  providers: [SharedData],
  template`
<wiz-step1></wiz-step1>
<wiz-step1></wiz-step1>
`})
export class AppComponent {}

Plunker example

For how to use services with more complex data see also

Jason
Guest

I would make components model-driven (data-driven) and reuse implementation.

Lets say you have 2 steps and 1 input in each step, so you create model:

private steps = [
     {
       description: 'step 1',
       value: '0'
     },
     {
       description: 'step 2',
       value: '1'
     }
]

Show each step:

component.model = this.steps[currentStep];

<component [model]="steps[currentStep]"></component>

<input [(ngModel)]="model.value">

Show all steps:

<component [model]="steps[1]"></component>